Improve SVG handling

gatsby-config.mjs

@@ -145,14 +145,6 @@ export default {
         path: './content/pages/404'
       }
     },
-    {
-      resolve: 'gatsby-plugin-react-svg',
-      options: {
-        rules: {
-          include: './src/images'
-        }
-      }
-    },
     'gatsby-plugin-netlify'
   ]
 };

gatsby-node.mjs

@@ -2,10 +2,12 @@ import { createSchemaCustomization } from './gatsby/createSchemaCustomization.mj
 import { createPages } from './gatsby/createPages.mjs';
 import { createResolvers } from './gatsby/createResolvers.mjs';
 import { onCreateNode } from './gatsby/onCreateNode.mjs';
+import { onCreateWebpackConfig } from './gatsby/onCreateWebpackConfig.mjs';
 
 export {
   createSchemaCustomization,
   createPages,
   createResolvers,
-  onCreateNode
+  onCreateNode,
+  onCreateWebpackConfig
 };

gatsby/onCreateWebpackConfig.mjs

@@ -0,0 +1,55 @@
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+export const onCreateWebpackConfig = ({ actions, getConfig }) => {
+  const config = getConfig();
+
+  // Exclude SVGs from the default file loader
+  config.module.rules = config.module.rules.map((rule) => {
+    if (rule.test?.toString().includes('svg')) {
+      return { ...rule, exclude: /\.svg$/i };
+    }
+    return rule;
+  });
+
+  // Handle SVGs as either emitted asset URLs (`?url`) or React components
+  config.module.rules.push({
+    test: /\.svg$/i,
+    oneOf: [
+      {
+        resourceQuery: /url/,
+        type: 'asset/resource'
+      },
+      {
+        issuer: /\.[jt]sx?$/,
+        use: [
+          {
+            loader: require.resolve('@svgr/webpack'),
+            options: {
+              svgo: true,
+              svgoConfig: {
+                multipass: true,
+                plugins: [
+                  {
+                    name: 'preset-default',
+                    params: {
+                      overrides: {
+                        removeViewBox: false,
+                        inlineStyles: {
+                          onlyMatchedOnce: false
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ]
+  });
+
+  actions.replaceWebpackConfig(config);
+};