From 951edd082cd41102db44a97450b0be1420e1219b Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Fri, 23 Dec 2022 11:27:03 -0500
Subject: [PATCH] Exclude `srcset` from svg image

---
 packages/next/client/image.tsx                   | 16 +++++++++++++---
 packages/next/shared/lib/image-loader.ts         |  6 ------
 .../next-image-new/default/test/index.test.ts    |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index fcde56b2d4b3c3c..f83137c25db6457 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -528,10 +528,11 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
     let loader: ImageLoaderWithConfig = rest.loader || defaultLoader
     // Remove property so it's not spread on <img> element
     delete rest.loader
+    // This special value indicates that the user
+    // didn't define a "loader" prop or "loader" config.
+    const isDefaultLoader = '__next_img_default' in loader
 
-    if ('__next_img_default' in loader) {
-      // This special value indicates that the user
-      // didn't define a "loader" prop or config.
+    if (isDefaultLoader) {
       if (config.loader === 'custom') {
         throw new Error(
           `Image with src "${src}" is missing "loader" prop.` +
@@ -625,6 +626,15 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
     if (config.unoptimized) {
       unoptimized = true
     }
+    if (
+      isDefaultLoader &&
+      src.endsWith('.svg') &&
+      !config.dangerouslyAllowSVG
+    ) {
+      // Special case to make svg serve as-is to avoid proxying
+      // through the built-in Image Optimization API.
+      unoptimized = true
+    }
 
     const [blurComplete, setBlurComplete] = useState(false)
     const [showAltText, setShowAltText] = useState(false)
diff --git a/packages/next/shared/lib/image-loader.ts b/packages/next/shared/lib/image-loader.ts
index 2313f5e2ff23316..d751b104f463277 100644
--- a/packages/next/shared/lib/image-loader.ts
+++ b/packages/next/shared/lib/image-loader.ts
@@ -53,12 +53,6 @@ function defaultLoader({
     }
   }
 
-  if (src.endsWith('.svg') && !config.dangerouslyAllowSVG) {
-    // Special case to make svg serve as-is to avoid proxying
-    // through the built-in Image Optimization API.
-    return src
-  }
-
   return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${
     quality || 75
   }`
diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
index 65892992a95c015..0faecb718500c21 100644
--- a/test/integration/next-image-new/default/test/index.test.ts
+++ b/test/integration/next-image-new/default/test/index.test.ts
@@ -951,7 +951,7 @@ function runTests(mode) {
       ).toBe('/test.svg')
       expect(
         await browser.elementById('without-loader').getAttribute('srcset')
-      ).toBe('/test.svg 1x, /test.svg 2x')
+      ).toBeFalsy()
     })
 
     it('should warn at most once even after state change', async () => {