Generate typescript for SVGs when using svgr and typescript option

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-typescript.js

@@ -0,0 +1,32 @@
+import assert from 'assert';
+import {bundle, outputFS} from '@parcel/test-utils';
+import path from 'path';
+
+describe('svg-react-typescript', () => {
+  let file, types, b;
+  before(async () => {
+    b = await bundle(
+      path.join(__dirname, '/integration/svg-react-typescript/react.ts'),
+      {
+        defaultConfig: path.join(
+          __dirname,
+          'integration/custom-configs/.parcelrc-svg-react',
+        ),
+        defaultTargetOptions: {
+          typescript: true,
+        },
+      },
+    );
+    file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
+    types = await outputFS.readFile(b.getBundles()[1].filePath, 'utf-8');
+  });
+
+  it('should support transforming SVGs to typescript react components', function () {
+    assert(!file.includes('inkscape'));
+    assert(file.includes('react.createElement("svg"'));
+  });
+
+  it('should support generating typescript types for SVG react components', function () {
+    assert(types.includes('const Icon: SVGRComponent'));
+  });
+});

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

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