fix: storybook icons, closes leather-io/issues#294

.storybook/main.ts

@@ -98,6 +98,40 @@ const config: StorybookConfig = {
         chrome: [path.join(__dirname, '../tests/mocks/mock-chrome.ts'), 'chrome'],
       })
     );
+    config.module ??= {};
+    config.module.rules ??= [];
+    // This modifies the existing image rule to exclude `.svg` files
+    // so we can load it instead with @svgr/webpack
+    const imageRule = config.module.rules.find((rule: any) => {
+      if (rule && typeof rule !== 'string' && rule.test instanceof RegExp) {
+        return rule.test.test('.svg');
+      }
+    });
+    if (imageRule && typeof imageRule !== 'string') {
+      imageRule.exclude = /\.svg$/;
+    }
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: {
+                    overrides: {
+                      removeViewBox: false,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
+    });
     return config;
   },
 };