24
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?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Dann1y
  • 257
  • 1
  • 3
  • 8

5 Answers5

21

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
  • 240
  • 2
  • 5
8

I think the best solution here is not to use Image. by default the nextjs Image component is not doing any optimization on svg's. You will then have multiple options/solutions to your problem:

  1. Extend webpack config on your next.config.js file using @svgr/webpack:
// next.config.js

webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack"]
  });

  return config;
}

// The file where u want to import the svg
import YourSvg from './public/yourSvg.svg'

// I recommend using the `currentColor` property on your svg, but you can also pass the color as prop
<YourSvg color="red" />
  1. Using babel-plugin-inline-react-svg: https://github.com/vercel/next.js/discussions/20993#discussioncomment-760119 enter image description here
Toni Bardina Comas
  • 1,670
  • 1
  • 5
  • 15
7

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Andre Evangelista
  • 3,390
  • 1
  • 21
  • 14
  • 2
    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
-1

Well, the solution that I have found is practical. I edit the svg and change the color. When I select the svg in vscode it shows me all its configuration.

This svg will change the color to pink:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="128.000000pt" height="128.000000pt" viewBox="0 0 128.000000 128.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#D2485A" stroke="none">
<path d="M647 1233 c-13 -15 -17 -38 -17 -102 l0 -83 -84 -97 c-47 -53 -109
-123 -140 -156 l-55 -60 -1 58 0 57 -175 0 -175 0 0 -400 0 -400 175 0 175 0
0 31 c0 23 4 30 14 26 8 -3 57 -20 108 -38 l93 -33 265 -3 c300 -5 316 -2 354
72 17 33 18 43 8 81 -10 39 -9 48 8 76 22 36 26 98 9 129 -8 16 -5 26 15 50
28 33 35 93 16 129 -8 15 -4 27 15 56 30 44 32 88 5 131 -34 56 -61 63 -235
63 -106 0 -155 3 -155 11 0 6 7 36 16 66 25 85 17 198 -18 251 -52 78 -182
128 -221 85z m113 -85 c42 -29 70 -82 70 -133 0 -22 -13 -87 -30 -145 -16 -58
-30 -108 -30 -112 0 -5 87 -8 193 -8 158 0 197 -3 215 -16 40 -28 26 -80 -24
-90 -30 -6 -34 -10 -34 -39 0 -24 6 -34 24 -43 50 -22 41 -85 -14 -97 -25 -6
-30 -11 -30 -37 0 -20 8 -37 25 -50 27 -21 33 -59 12 -76 -6 -6 -24 -13 -40
-17 -23 -6 -27 -13 -27 -40 0 -25 5 -35 20 -40 24 -7 37 -51 23 -74 -9 -14
-44 -16 -279 -16 l-269 0 -107 39 -108 38 0 215 0 216 88 95 c262 286 262 285
262 379 0 82 6 87 60 51z m-480 -698 l0 -320 -100 0 -100 0 0 320 0 320 100 0
100 0 0 -320z"/>
</g>
</svg>

here where it says fill I change the color:

<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#D2485A" stroke="none">
Todo-System Todo-System
  • 1
  • 2
-1

Apply the filter property to the style prop of the component.

import Image from 'next/image'
...

<Image src="/emotion.svg" alt="emtion" style={{ filter: 'invert(100%)' }} width={50} height={50} />

If you want to add a blue color to the SVG icon using the invert filter, you can modify the filter property accordingly. In this case, you want to invert the colors, which means turning the black areas white and the white areas black. To achieve a blue color, you need to invert these colors once more.

<Image src="/emotion.svg" alt="emtion" style={{ filter: 'invert(100%) sepia(100%) saturate(10000%) hue-rotate(180deg)' }} width={50} height={50} />

You can adjust the sepia, saturate, and hue-rotate values to fine-tune the blue color to your liking. For example, reducing the saturate value will make the color less intense, and changing the hue-rotate value will adjust the shade of blue.

Vensi
  • 1