feat: add option to explicitly use named export (#584)

packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap

@@ -65,6 +65,16 @@ const MemoSvgComponent = React.memo(SvgComponent);
 export default MemoSvgComponent;"
 `;
 
+exports[`plugin javascript with "namedExport" and "exportType" option and without "previousExport" state exports via named export 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent() {
+  return <svg><g /></svg>;
+}
+
+export { SvgComponent as ReactComponent };"
+`;
+
 exports[`plugin javascript with "namedExport" option and "previousExport" state has custom named export 1`] = `
 "import * as React from \\"react\\";
 
@@ -243,6 +253,16 @@ const MemoSvgComponent = React.memo(SvgComponent);
 export default MemoSvgComponent;"
 `;
 
+exports[`plugin typescript with "namedExport" and "exportType" option and without "previousExport" state exports via named export 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent() {
+  return <svg><g /></svg>;
+}
+
+export { SvgComponent as ReactComponent };"
+`;
+
 exports[`plugin typescript with "namedExport" option and "previousExport" state has custom named export 1`] = `
 "import * as React from \\"react\\";
 

packages/babel-plugin-transform-svg-component/src/index.test.js

@@ -162,6 +162,20 @@ describe('plugin', () => {
       })
     })
 
+    describe('with "namedExport" and "exportType" option and without "previousExport" state', () => {
+      it('exports via named export', () => {
+        const { code } = testPlugin(language)('<svg><g /></svg>', {
+          state: {
+            componentName: 'SvgComponent',
+            caller: { previousExport: null },
+          },
+          namedExport: 'ReactComponent',
+          exportType: 'named',
+        })
+        expect(code).toMatchSnapshot()
+      })
+    })
+
     describe('custom templates', () => {
       it('support basic template', () => {
         const { code } = testPlugin(language)('<svg><g /></svg>', {

packages/babel-plugin-transform-svg-component/src/util.js

@@ -232,7 +232,10 @@ export const getExport = ({ template }, opts) => {
     })
   }
 
-  result += `export default ${exportName}`
+  result +=
+    opts.exportType === 'named'
+      ? `export { ${exportName} as ${opts.namedExport} }`
+      : `export default ${exportName}`
   return template.ast(result, {
     plugins,
   })

packages/core/src/__snapshots__/config.test.js.snap

@@ -4,6 +4,7 @@ exports[`svgo async #loadConfig [async] should load config using filePath 1`] =
 Object {
   "dimensions": true,
   "expandProps": "end",
+  "exportType": "default",
   "icon": true,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -33,6 +34,7 @@ exports[`svgo async #loadConfig [async] should not load config with "runtimeConf
 Object {
   "dimensions": true,
   "expandProps": "end",
+  "exportType": "default",
   "icon": true,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -63,6 +65,7 @@ exports[`svgo async #loadConfig [async] should use default config without state.
 Object {
   "dimensions": false,
   "expandProps": "end",
+  "exportType": "default",
   "icon": false,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -86,6 +89,7 @@ exports[`svgo async #loadConfig [async] should work with custom config path 1`]
 Object {
   "dimensions": true,
   "expandProps": "end",
+  "exportType": "default",
   "icon": true,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -115,6 +119,7 @@ exports[`svgo sync #loadConfig [sync] should load config using filePath 1`] = `
 Object {
   "dimensions": true,
   "expandProps": "end",
+  "exportType": "default",
   "icon": true,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -144,6 +149,7 @@ exports[`svgo sync #loadConfig [sync] should not load config with "runtimeConfig
 Object {
   "dimensions": true,
   "expandProps": "end",
+  "exportType": "default",
   "icon": true,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -174,6 +180,7 @@ exports[`svgo sync #loadConfig [sync] should use default config without state.fi
 Object {
   "dimensions": false,
   "expandProps": "end",
+  "exportType": "default",
   "icon": false,
   "memo": false,
   "namedExport": "ReactComponent",
@@ -197,6 +204,7 @@ exports[`svgo sync #loadConfig [sync] should work with custom config path 1`] =
 Object {
   "dimensions": true,
   "expandProps": "end",
+  "exportType": "default",
   "icon": true,
   "memo": false,
   "namedExport": "ReactComponent",

packages/core/src/__snapshots__/convert.test.js.snap

@@ -69,6 +69,29 @@ export default SvgComponent
 "
 `;
 
+exports[`convert config should support options {"exportType":"named"} 1`] = `
+"import * as React from 'react'
+
+function SvgComponent(props) {
+  return (
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
+      <g
+        stroke=\\"#063855\\"
+        strokeWidth={2}
+        fill=\\"none\\"
+        fillRule=\\"evenodd\\"
+        strokeLinecap=\\"square\\"
+      >
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
+      </g>
+    </svg>
+  )
+}
+
+export { SvgComponent as ReactComponent }
+"
+`;
+
 exports[`convert config should support options {"icon":true} 1`] = `
 "import * as React from 'react'
 

packages/core/src/config.js

@@ -19,6 +19,7 @@ export const DEFAULT_CONFIG = {
   runtimeConfig: true,
   plugins: null,
   namedExport: 'ReactComponent',
+  exportType: 'default',
 }
 
 const explorer = cosmiconfig('svgr', {

packages/core/src/convert.test.js

@@ -313,6 +313,7 @@ describe('convert', () => {
         namedExport: 'Component',
         state: { caller: { previousExport: 'export default "logo.svg";' } },
       },
+      { exportType: 'named' },
     ]
 
     test.each(configs)('should support options %j', async (config) => {

packages/rollup/README.md

@@ -65,6 +65,10 @@ const App = () => (
 
 The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
 
+Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export.
+
+If you prefer named export in any case, you may set the `exportType` option to `named`.
+
 ### Use your own Babel configuration
 
 By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/smooth-code/svgr/blob/master/packages/rollup/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

packages/webpack/README.md

@@ -77,6 +77,10 @@ const App = () => (
 
 The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
 
+Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export.
+
+If you prefer named export in any case, you may set the `exportType` option to `named`.
+
 ### Use your own Babel configuration
 
 By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/webpack/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

website/src/pages/docs/rollup.mdx

@@ -75,6 +75,10 @@ const App = () => (
 
 The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
 
+Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export.
+
+If you prefer named export in any case, you may set the `exportType` option to `named`.
+
 ### Use your own Babel configuration
 
 By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/rollup/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

website/src/pages/docs/webpack.mdx

@@ -83,6 +83,10 @@ const App = () => (
 
 The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
 
+Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export.
+
+If you prefer named export in any case, you may set the `exportType` option to `named`.
+
 ### Use your own Babel configuration
 
 By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/webpack/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.