From 76eec86a6b08c6bdf43b03202b32c351597ce5c6 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 13 Jul 2023 02:33:27 +0200
Subject: [PATCH] Set sizes prop to any for svg icons (#52609)

For `link` tag's `sizes` property, the property is defined as:

> This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#rel) contains a value of icon or a non-standard type such as Apple's apple-touch-icon. It may have the following values:
`any`, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.

x-ref: https://html.spec.whatwg.org/#attr-link-sizes
x-ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link (`sizes` property definition section)

Closes #52002
Closes NEXT-133
---
 .../webpack/loaders/next-metadata-image-loader.ts      | 10 +++++-----
 test/e2e/app-dir/metadata/metadata.test.ts             |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts b/packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts
index 9867402da629..3c77a43c9027 100644
--- a/packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts
@@ -26,9 +26,9 @@ interface Options {
 async function nextMetadataImageLoader(this: any, content: Buffer) {
   const options: Options = this.getOptions()
   const { type, segment, pageExtensions, basePath } = options
-  const numericSizes = type === 'twitter' || type === 'openGraph'
   const { resourcePath, rootContext: context } = this
   const { name: fileNameBase, ext } = path.parse(resourcePath)
+  const useNumericSizes = type === 'twitter' || type === 'openGraph'
 
   let extension = ext.slice(1)
   if (extension === 'jpg') {
@@ -144,7 +144,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
     }`
   }
 
-  const imageSize = await getImageSize(
+  const imageSize: { width?: number; height?: number } = await getImageSize(
     content,
     extension as 'avif' | 'webp' | 'png' | 'jpeg'
   ).catch((err) => err)
@@ -159,11 +159,11 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
     ...(extension in imageExtMimeTypeMap && {
       type: imageExtMimeTypeMap[extension as keyof typeof imageExtMimeTypeMap],
     }),
-    ...(numericSizes
-      ? { width: imageSize.width as number, height: imageSize.height as number }
+    ...(useNumericSizes && imageSize.width != null && imageSize.height != null
+      ? imageSize
       : {
           sizes:
-            extension === 'ico'
+            extension === 'ico' || extension === 'svg'
               ? 'any'
               : `${imageSize.width}x${imageSize.height}`,
         }),
diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts
index 80198a52559b..87817f6ebbc9 100644
--- a/test/e2e/app-dir/metadata/metadata.test.ts
+++ b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -646,6 +646,7 @@ createNextDescribe(
 
         const iconSvg = $('link[rel="icon"][type="image/svg+xml"]')
         expect(iconSvg.attr('href')).toBe('/icon.svg?90699bff34adba1f')
+        expect(iconSvg.attr('sizes')).toBe('any')
 
         $ = await next.render$('/basic')
         const icon = $('link[rel="icon"]')