Generate typescript for SVGs when using svgr and typescript option (#…

…8411)

Co-authored-by: Niklas Mischkulnig <[email protected]>

packages/core/integration-tests/test/integration/svg-react-typescript/.svgrrc.json

@@ -0,0 +1,3 @@
+{
+    "typescript": true
+}

packages/core/integration-tests/test/integration/svg-react-typescript/index.html

@@ -0,0 +1 @@
+<img src="icon.svg" />

packages/core/integration-tests/test/integration/svg-react-typescript/package.json

@@ -0,0 +1,8 @@
+{
+  "source": "react.ts",
+  "main": "icons.js",
+  "types": "types.d.ts",
+  "dependencies": {
+    "react": "*"
+  }
+}

packages/core/integration-tests/test/integration/svg-react-typescript/react.ts

@@ -0,0 +1,8 @@
+
+interface SVGRComponent
+      extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+import React from 'react';
+import ReactIcon from './icon.svg';
+const Icon:SVGRComponent = ReactIcon;
+export default Icon;

packages/core/integration-tests/test/svg-react.js

@@ -19,4 +19,21 @@ describe('svg-react', function () {
     assert(file.includes('const SvgIcon ='));
     assert(file.includes('_react.createElement("svg"'));
   });
+  it('should support transforming SVGs to typescript react components', async function () {
+    let b = await bundle(
+      path.join(__dirname, '/integration/svg-react-typescript/react.ts'),
+      {
+        defaultConfig: path.join(
+          __dirname,
+          'integration/custom-configs/.parcelrc-svg-react',
+        ),
+      },
+    );
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
+    let types = await outputFS.readFile(b.getBundles()[1].filePath, 'utf-8');
+
+    assert(!file.includes('inkscape'));
+    assert(file.includes('react.createElement("svg"'));
+    assert(types.includes('const Icon: SVGRComponent'));
+  });
 });

packages/transformers/svg-react/src/SvgReactTransformer.js

@@ -17,7 +17,11 @@ function getComponentName(filePath) {
 }
 
 export default (new Transformer({
-  async transform({asset}) {
+  async loadConfig({config}) {
+    let conf = await config.getConfig(['.svgrrc.json', '.svgrrc']);
+    return conf?.contents;
+  },
+  async transform({asset, config}) {
     let code = await asset.getCode();
     let componentName = getComponentName(asset.filePath);
 
@@ -33,7 +37,7 @@ export default (new Transformer({
       },
     );
 
-    asset.type = 'jsx';
+    asset.type = config?.typescript ? 'tsx' : 'jsx';
     asset.bundleBehavior = null;
     asset.setCode(jsx);