Default SVGR config

next.config.ts

@@ -3,10 +3,29 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
     reactStrictMode: true,
     webpack(config) {
-        config.module.rules.push({
-            test: /\.svg$/i,
-            use: ['@svgr/webpack']
-        });
+        // 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;
     }
 };

svgr.d.ts

@@ -1,5 +1,10 @@
 declare module '*.svg' {
-    import { FC, SVGProps } from "react";
+    import { FC, SVGProps } from 'react';
     const content: FC<SVGProps<SVGElement>>;
     export default content;
 }
+
+declare module '*.svg?url' {
+    const content: any;
+    export default content;
+}