feat: add webpack typescript preset configuration (#573)

It simplifies TypeScript + webpack integration.

packages/webpack/README.md

@@ -105,7 +105,7 @@ By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configu
 It is possible to detect the module that requires your SVG using [`Rule.issuer`](https://webpack.js.org/configuration/module/#ruleissuer) in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.
 
 ```js
-;[
+[
   {
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
     issuer: /\.[jt]sx?$/,

packages/webpack/package.json

@@ -34,6 +34,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",

packages/webpack/src/__snapshots__/index.test.js.snap

@@ -22,6 +22,32 @@ function SvgIcon() {
 export default SvgIcon;"
 `;
 
+exports[`webpack loader should convert file (typescript: true) 1`] = `
+"var _g;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from \\"react\\";
+
+function SvgIcon(props) {
+  return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
+    width: 88,
+    height: 88,
+    xmlns: \\"http://www.w3.org/2000/svg\\"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement(\\"g\\", {
+    stroke: \\"#063855\\",
+    strokeWidth: 2,
+    fill: \\"none\\",
+    fillRule: \\"evenodd\\",
+    strokeLinecap: \\"square\\"
+  }, /*#__PURE__*/React.createElement(\\"path\\", {
+    d: \\"M51 37 37 51M51 51 37 37\\"
+  }))));
+}
+
+export default SvgIcon;"
+`;
+
 exports[`webpack loader should convert file 1`] = `
 "var _svg;
 
@@ -46,6 +72,30 @@ function SvgIcon() {
 export default SvgIcon;"
 `;
 
+exports[`webpack loader should convert file 2`] = `
+"var _svg;
+
+import * as React from \\"react\\";
+
+function SvgIcon() {
+  return _svg || (_svg = /*#__PURE__*/React.createElement(\\"svg\\", {
+    width: 88,
+    height: 88,
+    xmlns: \\"http://www.w3.org/2000/svg\\"
+  }, /*#__PURE__*/React.createElement(\\"g\\", {
+    stroke: \\"#063855\\",
+    strokeWidth: 2,
+    fill: \\"none\\",
+    fillRule: \\"evenodd\\",
+    strokeLinecap: \\"square\\"
+  }, /*#__PURE__*/React.createElement(\\"path\\", {
+    d: \\"M51 37 37 51M51 51 37 37\\"
+  }))));
+}
+
+export default SvgIcon;"
+`;
+
 exports[`webpack loader should support url-loader 1`] = `
 "var _svg;
 

packages/webpack/src/index.js

@@ -5,6 +5,7 @@ import svgo from '@svgr/plugin-svgo'
 import jsx from '@svgr/plugin-jsx'
 import presetReact from '@babel/preset-react'
 import presetEnv from '@babel/preset-env'
+import presetTS from '@babel/preset-typescript'
 import pluginTransformReactConstantElements from '@babel/plugin-transform-react-constant-elements'
 
 const babelOptions = {
@@ -50,6 +51,17 @@ function svgrLoader(source) {
       filePath: this.resourcePath,
     })
       .then((jsCode) => {
+        if (options.typescript) {
+          babelOptions.presets.push(
+            createConfigItem(
+              [
+                presetTS,
+                { allowNamespaces: true, allExtensions: true, isTSX: true },
+              ],
+              { type: 'preset' },
+            ),
+          )
+        }
         if (!babel) return jsCode
         return transformAsync(jsCode, babelOptions).then(({ code }) => code)
       })

packages/webpack/src/index.test.js

@@ -34,6 +34,42 @@ function compile(rules) {
 }
 
 describe('webpack loader', () => {
+  it('should convert file (typescript: true)', async () => {
+    const source = await compile([
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: path.resolve(__dirname, './index.js'),
+            options: {
+              typescript: true,
+            },
+          },
+        ],
+      },
+    ])
+
+    expect(source).toMatchSnapshot()
+  }, 15000)
+
+  it('should convert file', async () => {
+    const source = await compile([
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: path.resolve(__dirname, './index.js'),
+            options: {
+              expandProps: false,
+            },
+          },
+        ],
+      },
+    ])
+
+    expect(source).toMatchSnapshot()
+  }, 15000)
+
   it('should convert file', async () => {
     const source = await compile([
       {