feat: allow custom name for named export (#493)

Author: stefanprobst

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

@@ -65,6 +65,17 @@ const MemoSvgComponent = React.memo(SvgComponent);
 export default MemoSvgComponent;"
 `;
 
+exports[`plugin javascript with "namedExport" option and "previousExport" state has custom named export 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent() {
+  return <svg><g /></svg>;
+}
+
+export default \\"logo.svg\\";
+export { SvgComponent as Component };"
+`;
+
 exports[`plugin javascript with "native" option adds import from "react-native-svg" 1`] = `
 "import * as React from \\"react\\";
 import Svg from \\"react-native-svg\\";
@@ -197,6 +208,17 @@ const MemoSvgComponent = React.memo(SvgComponent);
 export default MemoSvgComponent;"
 `;
 
+exports[`plugin typescript with "namedExport" option and "previousExport" state has custom named export 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent() {
+  return <svg><g /></svg>;
+}
+
+export default \\"logo.svg\\";
+export { SvgComponent as Component };"
+`;
+
 exports[`plugin typescript with "native" option adds import from "react-native-svg" 1`] = `
 "import * as React from \\"react\\";
 import Svg from \\"react-native-svg\\";

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

@@ -115,6 +115,19 @@ describe('plugin', () => {
       })
     })
 
+    describe('with "namedExport" option and "previousExport" state', () => {
+      it('has custom named export', () => {
+        const { code } = testPlugin(language)('<svg><g /></svg>', {
+          state: {
+            componentName: 'SvgComponent',
+            caller: { previousExport: 'export default "logo.svg";' },
+          },
+          namedExport: 'Component',
+        })
+        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

@@ -210,7 +210,7 @@ export const getExport = ({ template }, opts) => {
 
   if (opts.state.caller && opts.state.caller.previousExport) {
     result += `${opts.state.caller.previousExport}\n`
-    result += `export { ${exportName} as ReactComponent }`
+    result += `export { ${exportName} as ${opts.namedExport} }`
     return template.ast(result, {
       plugins,
     })

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

@@ -6,6 +6,7 @@ Object {
   "expandProps": "end",
   "icon": true,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -34,6 +35,7 @@ Object {
   "expandProps": "end",
   "icon": true,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -63,6 +65,7 @@ Object {
   "expandProps": "end",
   "icon": false,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "plugins": null,
   "prettier": true,
@@ -85,6 +88,7 @@ Object {
   "expandProps": "end",
   "icon": true,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -113,6 +117,7 @@ Object {
   "expandProps": "end",
   "icon": true,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -141,6 +146,7 @@ Object {
   "expandProps": "end",
   "icon": true,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -170,6 +176,7 @@ Object {
   "expandProps": "end",
   "icon": false,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "plugins": null,
   "prettier": true,
@@ -192,6 +199,7 @@ Object {
   "expandProps": "end",
   "icon": true,
   "memo": false,
+  "namedExport": "ReactComponent",
   "native": false,
   "noSemi": true,
   "plugins": null,

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

@@ -445,6 +445,29 @@ export default MemoSvgComponent
 "
 `;
 
+exports[`convert config should support options 18 1`] = `
+"import * as React from 'react'
+
+function SvgComponent(props) {
+  return (
+    <svg width={88} height={88} {...props}>
+      <g
+        stroke=\\"#063855\\"
+        strokeWidth={2}
+        fill=\\"none\\"
+        fillRule=\\"evenodd\\"
+        strokeLinecap=\\"square\\"
+      >
+        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgComponent
+"
+`;
+
 exports[`convert config titleProp: without title added 1`] = `
 "import * as React from 'react'
 

packages/core/src/config.js

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

packages/core/src/convert.test.js

@@ -309,6 +309,10 @@ describe('convert', () => {
       },
       { titleProp: true },
       { memo: true },
+      {
+        namedExport: 'Component',
+        state: { caller: { previousExport: 'export default "logo.svg";' } },
+      },
     ]
 
     test.each(configs)('should support options %#', async (config) => {

packages/rollup/README.md

@@ -63,6 +63,8 @@ const App = () => (
 )
 ```
 
+The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
+
 ### 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

@@ -75,6 +75,8 @@ const App = () => (
 )
 ```
 
+The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
+
 ### 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

@@ -73,6 +73,8 @@ const App = () => (
 )
 ```
 
+The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
+
 ### 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

@@ -81,6 +81,8 @@ const App = () => (
 )
 ```
 
+The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
+
 ### 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.