Next.js Image Component scenarios to Render SVGs with Custom Attributes in Production Build
Hey everyone, I'm running into an issue that's driving me crazy... I'm upgrading from an older version and I tried several approaches but none seem to work... Quick question that's been bugging me - I'm using the Next.js Image component (v12.2.0) to render SVG images, but I'm working with issues when trying to pass custom attributes, such as `role` or `aria-label`, which are essential for accessibility. In development mode, everything works as expected, and the SVG renders with the correct attributes, but when I build for production, the attributes seem to get stripped out entirely. Here's a snippet of my code: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/images/icon.svg" alt="Description of the icon" width={100} height={100} role="img" aria-label="Custom SVG Icon" /> ); }; ``` In the production build, when I inspect the rendered HTML, I see that the `role` and `aria-label` attributes are missing. The console doesn't show any warnings or errors related to this. I've tried using an `img` tag instead, and while that renders the attributes correctly, I lose the benefits of the Next.js Image component like automatic optimization and lazy loading. I've also checked my `next.config.js` for any configurations that might affect this behavior: ```js module.exports = { images: { domains: ['yourdomain.com'], }, }; ``` Despite trying various solutions, including wrapping the Image component in a `div` with the attributes, I still need to get the custom attributes to continue in production. Is there a workaround to retain the custom attributes when using the Next.js Image component for SVGs? Any insights would be appreciated! For context: I'm using Javascript on macOS. This is part of a larger API I'm building. Any help would be greatly appreciated! I'm working on a REST API that needs to handle this. Any pointers in the right direction? Thanks, I really appreciate it! I've been using Javascript for about a year now. Any examples would be super helpful. For context: I'm using Javascript on CentOS. Hoping someone can shed some light on this.