Next.js 13 App目录中SVG图标动态变色实现方案咨询

为什么next/image无法修改SVG颜色 #

用next/image加载SVG时，它会被渲染为<img>标签，而<img>引用的外部SVG是独立文档，外部CSS的fill样式无法穿透到SVG内部，所以直接设置style={{ fill: "red" }}无效。

可行方案 #

方案1：将SVG作为React组件导入（推荐）

Next.js可通过配置webpack把SVG当作React组件导入，直接通过props控制颜色：

1. 在项目根目录的next.config.js中添加webpack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

2. 安装依赖（未安装时执行）：

npm install @svgr/webpack --save-dev

3. 导入并使用SVG组件：

import MenuIcon from "../../public/icons/menu.svg";

<MenuIcon fill="red" width={48} height={48} alt="menu icon" />

方案2：内联SVG代码

直接把SVG代码写在组件里，可直接修改fill属性，适合简单图标：

<svg fill="red" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
  <path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z" />
</svg>

方案3：使用CSS滤镜（仅单色转换）

若一定要用next/image，可通过CSS滤镜实现颜色转换，缺点是颜色精度有限，仅适合单色图标：

import MenuIcon from "../../public/icons/menu.svg";
import Image from "next/image";

<Image 
  src={MenuIcon} 
  alt="icon" 
  style={{ 
    filter: "invert(12%) sepia(99%) saturate(7499%) hue-rotate(0deg) brightness(102%) contrast(119%)" 
  }} 
/>

（注：可通过在线工具生成对应颜色的filter代码）

内容的提问来源于stack exchange，提问作者karthik suryadevara