Custom icon and SVG handling

.storybook/main.ts

@@ -25,6 +25,34 @@ const config: StorybookConfig = {
 
   typescript: {
     reactDocgen: 'react-docgen-typescript'
+  },
+  webpackFinal: async config => {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module?.rules?.find((rule) =>
+      (rule as { test?: RegExp })?.test?.test(".svg")
+    ) as { [key: string]: any }
+
+    config.module?.rules?.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/ // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: {
+          not: [...(fileLoaderRule?.resourceQuery?.not || []), /url/]
+        }, // exclude if *.svg?url
+        use: ["@svgr/webpack"]
+      }
+    )
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i
+
+    return config
   }
 };
 export default config;

jest.config.js

@@ -199,5 +199,6 @@ module.exports = {
   // watchman: true,
   moduleNameMapper: {
     ".(css|less|scss)$": "identity-obj-proxy",
+    "\\.svg": "<rootDir>/src/components/__mocks__/SvgMock.js",
   },
 };