Fix storybook config

.storybook/webpack.config.js

@@ -1,31 +1,26 @@
 module.exports = ({ config }) => {
-  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+  // Gatsby
   config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
-  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
   config.module.rules[0].use[0].loader = require.resolve('babel-loader');
-  // use @babel/preset-react for JSX and env (instead of staged presets)
   config.module.rules[0].use[0].options.presets = [
     require.resolve('@babel/preset-react'),
     require.resolve('@babel/preset-env'),
   ];
   config.module.rules[0].use[0].options.plugins = [
-    // use @babel/plugin-proposal-class-properties for class arrow functions
     require.resolve('@babel/plugin-proposal-class-properties'),
-    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
     require.resolve('babel-plugin-remove-graphql-queries'),
   ];
-  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
   config.resolve.mainFields = ['browser', 'module', 'main'];
 
   // Typescript
+  config.resolve.extensions.push('.ts', '.tsx');
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     loader: require.resolve('babel-loader'),
     options: {
       presets: [['react-app', { flow: false, typescript: true }]],
       plugins: [
         require.resolve('@babel/plugin-proposal-class-properties'),
-        // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
         require.resolve('babel-plugin-remove-graphql-queries'),
       ],
     },
@@ -39,7 +34,18 @@ module.exports = ({ config }) => {
     enforce: 'pre',
   });
 
-  config.resolve.extensions.push('.ts', '.tsx');
+  // SVG
+  config.resolve.extensions.push('.svg');
+  config.module.rules = config.module.rules.map(data => {
+    if (/svg\|/.test(String(data.test)))
+      data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
+    return data;
+  });
+  config.module.rules.push({
+    test: /\.svg$/,
+    loader: require.resolve('svg-react-loader'),
+    exclude: /node_module/,
+  });
 
   return config;
 };

package.json

@@ -92,6 +92,7 @@
     "reg-notify-github-plugin": "^0.7.26",
     "reg-publish-s3-plugin": "^0.7.25",
     "reg-suit": "^0.8.2",
+    "svg-react-loader": "^0.4.6",
     "svgo": "^1.3.0",
     "typescript": "^3.6.4",
     "zisui": "^1.3.5"

yarn.lock

@@ -15669,7 +15669,7 @@ svg-parser@^2.0.0:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
   integrity sha512-1gtApepKFweigFZj3sGO8KT8LvVZK8io146EzXrpVuWCDAbISz/yMucco3hWTkpZNoPabM+dnMOpy6Swue68Zg==
 
-svg-react-loader@^0.4.4:
+svg-react-loader@^0.4.4, svg-react-loader@^0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/svg-react-loader/-/svg-react-loader-0.4.6.tgz#b263efb3e3d2fff4c682a729351aba5f185051a1"
   integrity sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==