React中使用currentColor无法动态修改SVG颜色问题求助

原因分析 #

用<img>标签引入SVG时，SVG会作为独立资源加载，拥有自己的文档上下文，主页面的CSS（包括inline style属性）无法穿透到SVG内部，所以设置fill或color属性都无法影响到SVG里的rect元素。

解决方案 #

方案1：将SVG转为React组件（推荐） #

把SVG内容封装成React组件，通过props动态传递颜色值，直接控制fill属性：

// SdgHeartIcon.jsx
import React from 'react';

export default function SdgHeartIcon({ fillColor = 'currentColor' }) {
  return (
    <svg 
      version="1.1" 
      id="Layer_1" 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 200 200"
      style={{ enableBackground: 'new 0 0 200 200' }}
    >
      <rect x="0" y="0" fill={fillColor} width="200" height="200"/>
      <path fill="#FFFFFF" d="M133.17,79.76c-0.92,0-1.84, ..."/>
    </svg>
  );
}

使用组件时，直接传入颜色：

// MyComponent.jsx
import SdgHeartIcon from './SdgHeartIcon';

export default function MyComponent() {
  return (
    <SdgHeartIcon fillColor="red" />
  );
}

如果想保留currentColor的用法，也可以给SVG组件设置color样式，让内部rect继承：

// SdgHeartIcon.jsx
export default function SdgHeartIcon({ color = 'black' }) {
  return (
    <svg 
      version="1.1" 
      id="Layer_1" 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 200 200"
      style={{ color, enableBackground: 'new 0 0 200 200' }}
    >
      <rect x="0" y="0" fill="currentColor" width="200" height="200"/>
      <path fill="#FFFFFF" d="M133.17,79.76c-0.92,0-1.84, ..."/>
    </svg>
  );
}

// 使用
<SdgHeartIcon color="blue" />

方案2：直接嵌入inline SVG #

如果不需要复用图标，直接把SVG代码写进JSX中，动态绑定颜色值：

export default function MyComponent() {
  const iconColor = 'green';
  return (
    <svg 
      version="1.1" 
      id="Layer_1" 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 200 200"
      style={{ enableBackground: 'new 0 0 200 200' }}
    >
      <rect x="0" y="0" fill={iconColor} width="200" height="200"/>
      <path fill="#FFFFFF" d="M133.17,79.76c-0.92,0-1.84, ..."/>
    </svg>
  );
}

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