React自定义Icon组件中SVG图标颜色无法完全修改的问题

问题根源：你提供的SVG里，每个<path>标签都硬编码了stroke="#CED4DA"固定颜色值，这种内联样式的优先级高于通过组件传入的color属性，所以图标无法完全变为黑色。

方案一：修改SVG源码（最直接有效） #

直接移除所有path上的stroke="#CED4DA"属性，让SVG继承外部传入的stroke颜色：

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none">
    <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        <path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round"
              d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
        <path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m12.6666,18l1.3334,0"/>
        <path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m18,18l1.3333,0"/>
        <path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m11.3334,20.6667l0,1.3333"/>
        <path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m20.6666,20.6667l0,1.3333"/>
        <path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
        <path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m4.66663,8.66666l1.33333,0"/>
        <path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m10,8.66666l1.3333,0"/>
        <path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m3.33337,11.3333l0,1.3333"/>
        <path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m12.6666,11.3333l0,1.3333"/>
        <path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"
              d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
    </g>
</svg>

方案二：在React组件中强制覆盖样式 #

如果无法修改SVG源码，可在自定义Icon组件里通过CSS强制覆盖所有path的stroke颜色：

import { forwardRef } from 'react';

const Icon = forwardRef(({ color = 'currentColor', ...props }, ref) => {
  return (
    <svg
      ref={ref}
      style={{ stroke: color }}
      {...props}
    >
      {/* 原SVG内容 */}
      <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        {/* 其余path内容 */}
      </g>
    </svg>
  );
});

export default Icon;

也可以用CSS类名配合!important：

.custom-icon path {
  stroke: inherit !important;
}

组件中使用：

<svg className="custom-icon" style={{ stroke: color }} {...props}>
  {/* ... */}
</svg>

方案三：用currentColor实现主题适配 #

更优雅的方式是将SVG的path中stroke="#CED4DA"替换为stroke="currentColor"，这样SVG会自动继承父元素的color属性：

<path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
      d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>

之后使用组件时，只需传入color属性即可：

<Icon color="black" />

或者通过父元素的color控制：

<div style={{ color: 'black' }}>
  <Icon />
</div>

内容的提问来源于stack exchange，提问作者J. Adam