Next.js中使用next/image组件渲染SVG图标无法改色问题

问题原因 #

Next.js的Image组件会将SVG资源渲染为<img>标签，而<img>加载的SVG是独立的文档，外部的CSS样式或属性无法穿透到SVG内部。哪怕你把SVG里的fill设为currentColor，也无法生效——因为currentColor继承的是<img>元素的color，但<img>元素本身不会把这个值传递给内部的SVG内容。

解决方案 #

要修改SVG的颜色，必须将SVG内联到DOM中，而不是作为图片资源加载。以下是两种可行的实现方式：

方案1：将SVG作为React组件导入（适合图标数量较少的场景）

Next.js支持通过@svgr/webpack将SVG直接转为React组件，无需额外复杂配置。

1. 直接导入SVG文件时添加?react后缀：

import StudentIcon from '../public/icons/student.svg?react';

2. 使用组件时，通过style或className设置颜色：

<StudentIcon style={{ color: '#03fc94', width: 64, height: 64 }} />

这种方式下，SVG内部的fill="currentColor"会自动继承组件的color样式。

方案2：动态加载SVG并内联渲染（适合从public文件夹动态加载任意图标的场景）

通过fetch加载SVG文件内容，再用dangerouslySetInnerHTML将其渲染到页面中，同时通过容器的color样式控制SVG颜色。

'use client';

import { useState, useEffect } from 'react';
import type { ReactElement } from 'react';

type Props = {
  name: string;
  height: number;
  width: number;
  color?: string;
};

const Icon = ({ name, height, width, color }: Props): ReactElement => {
  const [svgContent, setSvgContent] = useState('');

  useEffect(() => {
    const loadSvg = async () => {
      try {
        const res = await fetch(`/icons/${name}.svg`);
        const content = await res.text();
        setSvgContent(content);
      } catch (err) {
        console.error(`Failed to load icon: ${name}`, err);
      }
    };

    loadSvg();
  }, [name]);

  return (
    <div 
      style={{ 
        height: `${height}px`, 
        width: `${width}px`, 
        color: color || 'currentColor',
        display: 'inline-block',
        verticalAlign: 'middle'
      }}
    >
      {svgContent && <div dangerouslySetInnerHTML={{ __html: svgContent }} />}
    </div>
  );
};

export default Icon;

关键前提 #

确保你的SVG文件内部的fill属性已设置为currentColor，例如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <!-- 你的SVG路径或图形内容 -->
</svg>

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