Next.js Image Component scenarios to Handle SVGs with External CSS in a Complex Layout
I'm currently working on a Next.js project (version 12.0.7) where I need to render SVG images that utilize external CSS for styling. However, when I utilize the Next.js Image component, the SVG does not apply the external styles as expected, resulting in incorrect display. The SVG appears with its default styles instead of the intended design. I have ensured that the CSS file is correctly linked in my `_app.js`, and I can see that the styles are loading correctly in the browser. Here’s how I’m attempting to render the SVG image: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div className="image-container"> <Image src="/images/my-image.svg" alt="My SVG Image" width={500} height={300} className="custom-svg" /> </div> ); }; ``` I’ve also tried using the `unoptimized` prop on the Image component: ```jsx <Image src="/images/my-image.svg" alt="My SVG Image" layout="intrinsic" width={500} height={300} unoptimized /> ``` But this resulted in the SVG not being responsive, and the dimensions did not match what I set. I’ve also verified that the path to the SVG is correct, and if I use a standard `<img>` tag, the external styles apply without scenario: ```html <img src="/images/my-image.svg" className="custom-svg" /> ``` Is there a specific way to get the Next.js Image component to properly render SVGs that depend on external CSS, or is this a known limitation? Any help would be appreciated!