fix: Unoptimized SVG images (#7244)

* fix: unoptimized SVG image

* chore: review updates

* Update apps/site/util/imageUtils.ts

Co-authored-by: Steven <[email protected]>
Signed-off-by: Caner Akdas <[email protected]>

* chore: format files

* chore: review update

* Update apps/site/util/imageUtils.ts

Co-authored-by: Steven <[email protected]>
Signed-off-by: Claudio W <[email protected]>

---------

Signed-off-by: Caner Akdas <[email protected]>
Signed-off-by: Claudio W <[email protected]>
Co-authored-by: Steven <[email protected]>
Co-authored-by: Claudio W <[email protected]>

apps/site/components/MDX/Image/index.tsx

@@ -2,14 +2,20 @@ import type { ImageProps } from 'next/image';
 import Image from 'next/image';
 import type { FC } from 'react';
 
-const MDXImage: FC<ImageProps> = ({ width, height, alt, ...props }) => {
+import { isSvgImage } from '@/util/imageUtils';
+
+const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
+  const isUnoptimizedImage = isSvgImage(src.toString());
+
   if (!width || !height) {
     // Since `width` and `height` are not provided in the Markdown image format,
     // we provide the height and width automatically.
     // @see https://nextjs.org/docs/pages/building-your-application/optimizing/images
     return (
       <Image
         {...props}
+        src={src}
+        unoptimized={isUnoptimizedImage}
         alt={alt}
         width={0}
         height={0}
@@ -19,7 +25,16 @@ const MDXImage: FC<ImageProps> = ({ width, height, alt, ...props }) => {
     );
   }
 
-  return <Image {...props} alt={alt} width={width} height={height} />;
+  return (
+    <Image
+      {...props}
+      alt={alt}
+      width={width}
+      height={height}
+      src={src}
+      unoptimized={isUnoptimizedImage}
+    />
+  );
 };
 
 export default MDXImage;

apps/site/next.config.mjs

@@ -23,8 +23,6 @@ const nextConfig = {
   images: {
     // We disable image optimisation during static export builds
     unoptimized: ENABLE_STATIC_EXPORT,
-    // We allow SVGs to be used as images
-    dangerouslyAllowSVG: true,
     // We add it to the remote pattern for the static images we use from GitHub
     remotePatterns: [
       {

apps/site/util/__tests__/imageUtils.test.mjs

@@ -0,0 +1,43 @@
+import { isSvgImage } from '@/util/imageUtils';
+
+describe('isSvgImage', () => {
+  const testCases = [
+    {
+      description: 'should return true for a valid .svg URL',
+      input: 'https://nodejs.org/image.svg',
+      expected: true,
+    },
+    {
+      description: 'should return true for a URL with query params',
+      input: 'https://nodejs.org/image.svg?query=param',
+      expected: true,
+    },
+    {
+      description: 'should return false for a URL without a .svg extension',
+      input: 'https://nodejs.org/image',
+      expected: false,
+    },
+    {
+      description:
+        'should return false for a URL containing ".svg" but not ending with it',
+      input: 'https://nodejs.org/image.svg.png',
+      expected: false,
+    },
+    {
+      description: 'should return false for an empty string',
+      input: '',
+      expected: false,
+    },
+    {
+      description: 'should return false for a non-URL string',
+      input: 'not-a-url',
+      expected: false,
+    },
+  ];
+
+  testCases.forEach(({ description, input, expected }) => {
+    it(description, () => {
+      expect(isSvgImage(input)).toBe(expected);
+    });
+  });
+});

apps/site/util/imageUtils.ts

@@ -0,0 +1,19 @@
+/**
+ * This is a temporary workaround that can be removed once Next.js is upgraded.
+ * See https://github.com/vercel/next.js/pull/72970
+ *
+ * Checks if the given source string points to an SVG image.
+ *
+ * This function examines the base part of the provided string (ignoring query parameters)
+ * to determine if it ends with the `.svg` extension.
+ *
+ * @param src - The URL or string representing the source of the image.
+ * @returns `true` if the source points to an SVG image, otherwise `false`.
+ */
+export const isSvgImage = (src: string): boolean => {
+  // Split the source string at the '?' character to separate the main path from query parameters
+  const [image] = src.split('?');
+
+  // Check if the base path (before any query parameters) ends with '.svg'
+  return image.endsWith('.svg');
+};