(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
属性。将其应用于 <img>
不会有任何效果。
【参考方案1】:
我建议你不要直接使用svg文件,而是使用Playground SVG(https://react-svgr.com/playground/),将文件转换为JS,然后你可以通过props改变颜色和其他东西。
【讨论】:
感谢您的建议!我使用 svg 更改了方法以上是关于(Next.js) 如何在 next/image 中更改 SVG 的颜色?的主要内容,如果未能解决你的问题,请参考以下文章