diff --git a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
index 4cb9694d..93ded8d4 100644
--- a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
+++ b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
@@ -1,5 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "defaultSpecifier" 1`] = `
+"import h from "hyperapp-jsx-pragma";
+const SvgComponent = () => ;
+export default SvgComponent;"
+`;
+
exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = `
"import * as Preact from "preact";
const SvgComponent = () => ;
@@ -226,6 +232,12 @@ const Memo = memo(ForwardRef);
export default Memo;"
`;
+exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "defaultSpecifier" 1`] = `
+"import h from "hyperapp-jsx-pragma";
+const SvgComponent = () => ;
+export default SvgComponent;"
+`;
+
exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = `
"import * as Preact from "preact";
const SvgComponent = () => ;
diff --git a/packages/babel-plugin-transform-svg-component/src/index.test.ts b/packages/babel-plugin-transform-svg-component/src/index.test.ts
index 7272ff0d..7ce0b156 100644
--- a/packages/babel-plugin-transform-svg-component/src/index.test.ts
+++ b/packages/babel-plugin-transform-svg-component/src/index.test.ts
@@ -338,6 +338,14 @@ describe('plugin', () => {
expect(code).toMatchSnapshot()
})
+ it('allows to specify a custom "classic" jsxRuntime using "defaultSpecifier"', () => {
+ const { code } = testPlugin(language)('', {
+ jsxRuntime: 'classic',
+ jsxRuntimeImport: { defaultSpecifier: 'h', source: 'hyperapp-jsx-pragma' },
+ })
+ expect(code).toMatchSnapshot()
+ })
+
it('throws with invalid configuration', () => {
expect(() => {
testPlugin(language)('', {
@@ -345,7 +353,7 @@ describe('plugin', () => {
jsxRuntimeImport: { source: 'preact' },
})
}).toThrow(
- 'Specify either "namespace" or "specifiers" in "jsxRuntimeImport" option',
+ 'Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option',
)
})
})
diff --git a/packages/babel-plugin-transform-svg-component/src/types.ts b/packages/babel-plugin-transform-svg-component/src/types.ts
index c171a5bb..c4caad7f 100644
--- a/packages/babel-plugin-transform-svg-component/src/types.ts
+++ b/packages/babel-plugin-transform-svg-component/src/types.ts
@@ -29,6 +29,7 @@ interface State {
export interface JSXRuntimeImport {
source: string
namespace?: string
+ defaultSpecifier?: string
specifiers?: string[]
}
diff --git a/packages/babel-plugin-transform-svg-component/src/variables.ts b/packages/babel-plugin-transform-svg-component/src/variables.ts
index 64a1481b..e597b390 100644
--- a/packages/babel-plugin-transform-svg-component/src/variables.ts
+++ b/packages/babel-plugin-transform-svg-component/src/variables.ts
@@ -69,13 +69,17 @@ const getJsxRuntimeImport = (cfg: JSXRuntimeImport) => {
const specifiers = (() => {
if (cfg.namespace)
return [t.importNamespaceSpecifier(t.identifier(cfg.namespace))]
+ if (cfg.defaultSpecifier) {
+ const identifier = t.identifier(cfg.defaultSpecifier)
+ return [t.importDefaultSpecifier(identifier)]
+ }
if (cfg.specifiers)
return cfg.specifiers.map((specifier) => {
const identifier = t.identifier(specifier)
return t.importSpecifier(identifier, identifier)
})
throw new Error(
- `Specify either "namespace" or "specifiers" in "jsxRuntimeImport" option`,
+ `Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option`,
)
})()
return t.importDeclaration(specifiers, t.stringLiteral(cfg.source))
diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
index 9468ca8b..98f21560 100644
--- a/packages/core/src/config.ts
+++ b/packages/core/src/config.ts
@@ -32,6 +32,12 @@ export interface Config {
exportType?: 'named' | 'default'
namedExport?: string
jsxRuntime?: 'classic' | 'classic-preact' | 'automatic'
+ jsxRuntimeImport?: {
+ source: string
+ namespace?: string
+ specifiers?: string[]
+ defaultSpecifier?: string
+ }
// CLI only
index?: boolean
diff --git a/packages/plugin-jsx/src/index.ts b/packages/plugin-jsx/src/index.ts
index 9d198df0..d05faca5 100644
--- a/packages/plugin-jsx/src/index.ts
+++ b/packages/plugin-jsx/src/index.ts
@@ -7,6 +7,12 @@ import svgrBabelPreset, {
import type { Plugin, Config } from '@svgr/core'
const getJsxRuntimeOptions = (config: Config): Partial => {
+ if (config.jsxRuntimeImport) {
+ return {
+ importSource: config.jsxRuntimeImport.source,
+ jsxRuntimeImport: config.jsxRuntimeImport,
+ }
+ }
switch (config.jsxRuntime) {
case null:
case undefined:
diff --git a/website/pages/docs/options.mdx b/website/pages/docs/options.mdx
index 072c7288..c9386e97 100644
--- a/website/pages/docs/options.mdx
+++ b/website/pages/docs/options.mdx
@@ -46,9 +46,11 @@ Specify a custom JSX runtime source to use. Allows to customize the import added
Example: `jsxRuntimeImport: { source: 'preact', specifiers: ['h'] }` for "classic-preact" equivalent.
-| Default | CLI Override | API Override |
-| ------- | ------------ | ------------------------------------------------------------ |
-| `null` | - | `jsxRuntimeImport: { source: string, specifiers: string[] }` |
+To use the default import instead of a list of names, you can use `defaultSpecifier`, for example to use svgr with `hyperapp-jsx-pragma`, you can specify `jsxRuntimeImport: { source: 'hyperapp-jsx-pragma', defaultSpecifier: 'h' }` to get an end result of `import h from "hyperapp-jsx-pragma";`
+
+| Default | CLI Override | API Override |
+| ------- | ------------ | -------------------------------------------------------------------------------------- |
+| `null` | - | `jsxRuntimeImport: { source: string, specifiers: string[], defaultSpecifier: string }` |
## Icon