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

Posted 2023-03-06

【中文标题】(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 属性。将其应用于 <img> 不会有任何效果。

【参考方案1】：

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

【讨论】：

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