add svgr loader in sb and update configs

Author: pettinarip

.storybook/main.ts

@@ -47,6 +47,9 @@ const config: StorybookConfig = {
     },
   },
   webpackFinal: async (config) => {
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+
     if (config.resolve) {
       config.resolve.plugins = [
         ...(config.resolve.plugins || []),
@@ -55,6 +58,22 @@ const config: StorybookConfig = {
         }),
       ]
     }
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) =>
+      rule?.["test"]?.test(".svg")
+    )
+    if (imageRule) {
+      imageRule["exclude"] = /\.svg$/
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    })
+
     return config
   },
   typescript: {

next.config.js

@@ -27,10 +27,31 @@ module.exports = (phase, { defaultConfig }) => {
         test: /\.ya?ml$/,
         use: "yaml-loader",
       })
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: "@svgr/webpack",
-      })
+
+      // SVG loader
+      // Grab the existing rule that handles SVG imports
+      const fileLoaderRule = config.module.rules.find((rule) =>
+        rule.test?.test?.(".svg")
+      )
+
+      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
     },

src/assets.d.ts

@@ -1,5 +1,10 @@
 declare module "*.svg" {
-  import { ReactElement, SVGProps } from "react"
-  const content: (props: SVGProps<SVGElement>) => ReactElement
+  import { FC, SVGProps } from "react"
+  const content: FC<SVGProps<SVGElement>>
+  export default content
+}
+
+declare module "*.svg?url" {
+  const content: unknown
   export default content
 }