React中如何让SVG图标继承父元素color属性而非单独传参

要实现图标颜色随父元素color自动变化，核心是利用CSS的currentColor关键字——它会自动继承当前元素的color值，若元素自身未设置color则向上继承父元素的对应属性。具体修改步骤如下：

• 移除组件中手动传递的color props（包括默认值），无需再单独传递颜色参数
• 将SVG内部<path>的fill属性设置为currentColor，让路径颜色跟随继承的color值
• 确保SVG本身没有硬编码的颜色样式，保证继承逻辑正常生效

修改后的组件代码：

const Icon = ({
  className: overriddenClasses,
  style: overriddenStyles,
  size = defaultSize,
}) => (
  <svg
    viewBox='0 0 33 32'
    style={{
      ...overriddenStyles,
      width: size,
      height: size,
      flexShrink: '0',
    }}
    className={overriddenClasses}
  >
    <path
      fill="currentColor"
      d='M29.799 8.661c-0....'
    />
  </svg>
);

使用示例 #

父元素设置color后，图标会自动匹配：

<div style={{ color: 'red' }}>
  <Icon size={24} /> {/* 图标显示红色 */}
</div>

<div style={{ color: '#2ecc71' }}>
  <Icon size={24} /> {/* 图标显示绿色 */}
</div>

如果需要临时覆盖颜色，也可以直接给Icon组件设置color样式：

<Icon size={24} style={{ color: 'blue' }} />
// 或通过CSS类
.icon-yellow { color: yellow; }
<Icon size={24} className="icon-yellow" />

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