Use @svgr library in transformer-svg-react (parcel-bundler#5878)

Co-authored-by: Jasper De Moor <[email protected]> Co-authored-by: Niklas Mischkulnig <[email protected]>
gcoakes · Feb 20, 2021 · 72ce767 · 72ce767
1 parent b6c37c7
commit 72ce767
Show file tree

Hide file tree

Showing 4 changed files with 292 additions and 278 deletions.
diff --git a/packages/core/integration-tests/test/svg.js b/packages/core/integration-tests/test/svg.js
@@ -22,6 +22,6 @@ describe('svg', function() {
 
     let file = await outputFS.readFile(path.join(distDir, 'index.js'), 'utf-8');
     assert(file.includes('function SvgIcon'));
-    assert(file.includes('_reactDefault.default.createElement("svg"'));
+    assert(file.includes('_react.createElement("svg"'));
   });
 });
diff --git a/packages/transformers/svg-react/package.json b/packages/transformers/svg-react/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@parcel/plugin": "2.0.0-beta.1",
     "camelcase": "^5.3.1",
-    "svg-to-jsx": "^1.0.2"
+    "@svgr/core": "^5.5.0",
+    "@svgr/plugin-jsx": "^5.5.0"
   }
 }
diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js
@@ -4,32 +4,36 @@ import {Transformer} from '@parcel/plugin';
 
 import path from 'path';
 import camelcase from 'camelcase';
-import svgToJsx from 'svg-to-jsx';
+import jsxPlugin from '@svgr/plugin-jsx';
+import convert from '@svgr/core';
 
 function getComponentName(filePath) {
   let validCharacters = /[^a-zA-Z0-9_-]/g;
   let name = path.parse(filePath).name.replace(validCharacters, '');
-  let pascalCaseFileName = camelcase(name, {
+  return camelcase(name, {
     pascalCase: true,
   });
-
-  return `Svg${pascalCaseFileName}`;
 }
 
 export default (new Transformer({
   async transform({asset}) {
     let code = await asset.getCode();
     let componentName = getComponentName(asset.filePath);
-    let jsx = await svgToJsx(code);
 
-    code = `import React from 'react';
-    export default function ${componentName}(props) {
-      return ${jsx.replace(/<svg (.*)>/, '<svg $1 {...props}>')};
-    }
-    `;
+    const jsx = await convert(
+      code,
+      {},
+      {
+        caller: {
+          name: '@parcel/transformer-svg-react',
+          defaultPlugins: [jsxPlugin],
+        },
+        filePath: componentName,
+      },
+    );
 
     asset.type = 'jsx';
-    asset.setCode(code);
+    asset.setCode(jsx);
 
     return [asset];
   },