From 412aa2a79969dc0c894fdffee5f3e3944c0cbb78 Mon Sep 17 00:00:00 2001
From: Thomas KLEIN <tomak@dnd.fr>
Date: Sat, 25 Jan 2025 19:59:20 +0100
Subject: [PATCH] Default SVGR config

---
 next.config.ts | 27 +++++++++++++++++++++++----
 svgr.d.ts      |  7 ++++++-
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 8ce01f2..aa9e87f 100644
--- a/next.config.ts
+++ b/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;
     }
 };
diff --git a/svgr.d.ts b/svgr.d.ts
index c8768ec..ccca311 100644
--- a/svgr.d.ts
+++ b/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;
+}