👀 Views: 1693 💬 Answers: 1 📅 Created: 2025-06-08

next.js svg css-modules javascript

I'm testing a new approach and I'm wondering if anyone has experience with I've searched everywhere and can't find a clear answer... I'm experiencing an scenario with the Next.js Image component when trying to render local SVG images that are styled with external CSS modules. The SVG file is located in the `public` directory and I’m importing a CSS module to style it. However, the image is not displaying, and I get a console behavior saying `behavior: Invalid image src /images/icon.svg (see more in images/next-image.md).` I've tried using the `next/image` component like this: ```jsx import Image from 'next/image'; import styles from './Icon.module.css'; const Icon = () => { return ( <div className={styles.iconContainer}> <Image src="/images/icon.svg" alt="Icon" width={64} height={64} /> </div> ); }; export default Icon; ``` The `Icon.module.css` has some basic styles: ```css .iconContainer { display: flex; justify-content: center; align-items: center; } ``` I've checked the file path, and the SVG file is indeed in the specified location. I also tried to add the `unoptimized` prop, but it did not work either. The strange part is that if I directly use an `<img>` tag instead of the `Image` component, it renders the SVG perfectly: ```jsx const Icon = () => { return ( <div className={styles.iconContainer}> <img src="/images/icon.svg" alt="Icon" /> </div> ); }; ``` Is there any specific configuration I need to consider when using SVG files with the Next.js Image component? I’m using Next.js version 12.0.7. Any help is appreciated! I'm working on a API that needs to handle this. Has anyone else encountered this? This is for a CLI tool running on Ubuntu 20.04. My development environment is CentOS. This is part of a larger REST API I'm building.