import Image from 'next/image'
...
<Image src="/emotion.svg" alt="emtion" width={50} height={50} />
I want to change the SVG color in next/image.
But in CSS,
img {
fill="#ffffff"
}
is not working.
How can I solve this?
Asked
Active
Viewed 1.1k times
11
Zsolt Meszaros
- 15,542
- 12
- 36
- 40
Dann1y
- 133
- 1
- 2
- 6
2 Answers
9
I recommend you to not to use svg files directly, but use Playground SVG (https://react-svgr.com/playground/), convert the file to JS and then you can change the color and other stuff by props.
Andres Campuzano Garzon
- 121
- 1
- 3
-
1Thank you for your advice! I changed the method using svg – Dann1y Apr 24 '21 at 16:45
-
I would like to know the benefit of doing that – labs Apr 20 '22 at 13:18
-
sure @labs, by doing it, you can use state inside the SVG, e.x if you want to trigger something with hovering the SVG – Andres Campuzano Garzon May 03 '22 at 20:19
-
That's cool , what about performance wise – labs May 06 '22 at 11:10
1
I am using Next/Image and inserting the SVG url dynamically. For this case I needed to use css filter to somehow change the SVG color.
Andre Evangelista
- 3,000
- 1
- 19
- 13
-
This answer pointed me in the right direction. Thanks! For anyone looking into this, follow this SO thread for more details: https://stackoverflow.com/a/53336754 – 99darshan May 17 '22 at 04:27