React中将SVG作为组件使用时如何为多条路径设置不同fill填充色

以下是三种常用的实现方式，可根据实际场景选择：

方案1：使用CSS变量（最便捷，无需改动原有导入逻辑） #

• 修改SVG源文件，将不同路径的fill属性绑定到独立的CSS变量，可同时设置默认值兜底：

<path fill="var(--icon-fill-primary, #333)" />
<path fill="var(--icon-fill-secondary, #999)" />

• React组件使用时直接通过style属性传入对应变量值即可：

import { ReactComponent as Icon } from '../assets/icon.svg'

// 调用时自定义颜色
<Icon style={{
  '--icon-fill-primary': '#000',
  '--icon-fill-secondary': '#f00'
}} />

方案2：提取SVG为自定义React组件（灵活度最高，适合复杂定制需求） #

• 直接复制SVG源码封装为独立组件，显式声明不同路径的填充色props：

// 新建组件文件 components/CustomIcon.jsx
export default function CustomIcon({ 
  fillPrimary = '#333', 
  fillSecondary = '#999', 
  ...rest 
}) {
  return (
    // 替换为你的SVG原viewBox、宽高等属性
    <svg {...rest} viewBox="0 0 24 24" width="24" height="24">
      <path fill={fillPrimary} d="第一个path的d属性值" />
      <path fill={fillSecondary} d="第二个path的d属性值" />
    </svg>
  )
}

• 调用时直接传对应颜色props即可：

import CustomIcon from './components/CustomIcon'

<CustomIcon fillPrimary="#000" fillSecondary="#f00" />

方案3：结合currentColor与CSS类名控制 #

• 修改SVG源文件，给不同路径添加类名做区分：

<path fill="currentColor" />
<path class="icon-secondary-path" />

• 调用时给SVG组件传入自定义类名，通过CSS规则控制不同路径颜色：

<Icon className="custom-icon" />

/* 你的CSS文件中 */
.custom-icon {
  color: #000; /* 对应第一个path的currentColor */
}
.custom-icon .icon-secondary-path {
  fill: #f00; /* 单独控制第二个路径的填充色 */
}

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