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

Question

import Image from 'next/image'

...

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

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

但在 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使用以下命令扩展文件上的 webpack 配置@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" />

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

<Link href={"/setting"} className="h-fit w-fit">
    <Image className="dark:invert"
        src={"/setting.svg"} alt={"setting.svg"} width={80} height={80} />
</Link>

invert只需在 tailwind css 中使用即可。

编辑：这只是反转颜色，这对于我的情况下的暗模式很有用。