(Next.js) 如何更改 next/image 中 SVG 的颜色？

Question

import Image from 'next/image'

...

<Image src="/emotion.svg" alt="emtion" width={50} height={50} />

我想更改

next/image

中的 SVG 颜色。

但是在 CSS 中，

img {
  fill="#ffffff"
}

不起作用。

我该如何解决这个问题？

Answer 1

我建议你不要直接使用svg文件，而是使用Playground SVG（https://react-svgr.com/playground/），将文件转换为JS，然后你可以通过props改变颜色和其他东西.

Answer 2

我认为最好的解决方案是不要使用

Image

。默认情况下，

nextjs

Image

组件不会对

svg's

进行任何优化。然后您将有多种选择/解决方案来解决您的问题：

1. 使用

   next.config.js

   :

    在您的 

   @svgr/webpack
文件上扩展 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" />

2. 使用

   babel-plugin-inline-react-svg

   ：https://github.com/vercel/next.js/discussions/20993#discussioncomment-760119

Answer 3

我正在使用 Next/Image 并动态插入 SVG url。对于这种情况，我需要使用

css filter

以某种方式更改 SVG 颜色。

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

Answer 4

将过滤器属性应用于组件的 style 属性。

import Image from 'next/image'
...

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

如果您想使用反转滤镜向 SVG 图标添加蓝色，您可以相应地修改滤镜属性。在这种情况下，您想要反转颜色，这意味着将黑色区域变成白色，将白色区域变成黑色。要获得蓝色，您需要再次反转这些颜色。

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

您可以调整棕褐色、饱和度和色调旋转值，以根据您的喜好微调蓝色。例如，降低饱和度值将使颜色不那么强烈，更改色调旋转值将调整蓝色的阴影。

Answer 5

嗯，我找到的解决方案很实用。我编辑 svg 并更改颜色。当我在 vscode 中选择 svg 时，它会显示它的所有配置。

此 svg 会将颜色更改为粉红色：

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

这里说填充的地方我改变了颜色：

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