From c7c0b59d34fc2392764d6d0725b79da1e94bcff1 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Tue, 3 Sep 2024 06:05:02 +0100
Subject: [PATCH] fix: storybook icons, closes leather-io/issues#294

---
 .storybook/main.ts | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8d8f6bc1a72..df42fe83b97 100644
--- a/.storybook/main.ts
+++ b/.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;
   },
 };