Next.js Image Component Not Rendering SVGs Properly with Dynamic Imports
I'm wondering if anyone has experience with I've tried everything I can think of but I've looked through the documentation and I'm still confused about I'm having trouble with the Next.js Image component not rendering SVG images correctly when they're dynamically imported. I'm using Next.js version 12.1.0, and I have a component that uses dynamic imports to load SVGs based on user selection. The SVGs are being imported using the following code: ```javascript import dynamic from 'next/dynamic'; const DynamicSVG = dynamic(() => import(`./path/to/svgs/${selectedSVG}.svg`), { ssr: false, }); ``` I expected the SVG to render just like any other image, but instead, I get the following behavior in the console: ``` behavior: Invalid image src "...". Image with src "..." must use "next/image". ``` I also tried wrapping the dynamic import with a custom component that uses the `next/image` functionality, like this: ```javascript import Image from 'next/image'; const SVGImage = ({ src, alt }) => { return <Image src={src} alt={alt} width={500} height={500} />; }; ``` However, this leads to a blank space where the SVG should be rendered. I ensured that the path is correct and accessible, and I've tried different configurations for the `next.config.js` file to verify if SVGs are treated correctly: ```javascript module.exports = { images: { domains: ['example.com'], // Your allowed domain formats: ['image/avif', 'image/webp'], }, }; ``` Still, the SVGs are not rendering as expected. They show up in the network tab, but the image component seems to ignore them entirely. Has anyone encountered this scenario or found a workaround for using SVGs with dynamic imports in the Next.js Image component? Any help would be greatly appreciated! For context: I'm using Javascript on Windows. This is happening in both development and production on Debian. Thanks in advance! Any examples would be super helpful.