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

Posted

技术标签:

【中文标题】(Next.js) 如何在 next/image 中更改 SVG 的颜色?【英文标题】:(Next.js) How can I change the color of SVG in next/image? 【发布时间】:2021-04-16 23:25:22 【问题描述】:
import Image from 'next/image'

...

<Image src="/emotion.svg"  width=50 height=50 />

我想更改 next/image 中的 SVG 颜色。

但在 CSS 中,

img 
  fill="#ffffff"

不工作。

我该如何解决这个问题?

【问题讨论】:

您需要定位正确的 SVG 元素以应用 fill 属性。将其应用于 &lt;img&gt; 不会有任何效果。 【参考方案1】:

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

【讨论】:

感谢您的建议!我使用 svg 更改了方法

以上是关于(Next.js) 如何在 next/image 中更改 SVG 的颜色?的主要内容,如果未能解决你的问题,请参考以下文章