0

I have next 13 app with the app directory and I am trying to show an icon in a component, I was able to achieve this but not able to change the color of the svg image. Is there a way to achieve coloring for the svg image with next/Image or is there any other approach to achieve this?

import MenuIcon from "../../public/icons/menu.svg";
import Image from "next/image";
      
      {/* jsx */}
      {/* this works and the icon appears red */}
      <svg fill="red" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" 
         width="48">
        <path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z" />
      </svg>
      {/* this does not work */}
      <Image style={{ fill: "red" }} src={MenuIcon} alt="icon"></Image>
Jonas
  • 121,568
  • 97
  • 310
  • 388
karthik suryadevara
  • 128
  • 1
  • 8
  • 1
    Does this answer your question? [(Next.js) How can I change the color of SVG in next/image?](https://stackoverflow.com/questions/65676689/next-js-how-can-i-change-the-color-of-svg-in-next-image) – Madan Bhandari May 08 '23 at 16:36
  • This is not a Next.js problem. You cannot change the fill of an SVG if you render it as an image with `src`. It should be used as an HTML element if you want to manipulate ti. – Youssouf Oumar May 08 '23 at 17:55

1 Answers1

0

Use this tool, paste you SVG. You will find react component for this SVG. Then check for prop to change the color of SVG in that component.

Rahul Khatri
  • 56
  • 1
  • 3