如何在React项目中减少SVG图标数量并为嵌套元素传色

我正好遇到过类似的场景，你的需求非常合理——没必要为不同颜色的图标重复创建组件，我们可以通过SVG的样式特性和React的props结合来解决这个问题。

核心问题分析 #

你之前尝试用className="fill-red"设置SVG的填充色，但内部的<path>元素没有生效，这是因为SVG的fill属性默认不会向下继承给子元素。<path>的默认填充色是黑色，除非你明确指定它继承父元素的颜色或者使用变量。

方法一：使用currentColor实现颜色继承（推荐） #

这是最简洁的方案，利用CSS的currentColor关键字让SVG内部元素继承父元素的color属性：

1. 修改SVG文件：将<path>的fill属性设置为currentColor

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path 
    fill="currentColor" 
    fill-rule="evenodd" 
    clip-rule="evenodd" 
    d="M15.205 4.71967C15.4978 5.01256 15.4978 5.48744 15.205 5.78033L11.023 9.96229L15.205 14.1443C15.4979 14.4372 15.4979 14.9121 15.205 15.205C14.9121 15.4978 14.4372 15.4978 14.1443 15.205L9.96233 11.0229L5.78033 15.205C5.48744 15.4978 5.01256 15.4978 4.71967 15.205C4.42678 14.9121 4.42678 14.4372 4.71967 14.1443L8.90167 9.96229L4.71971 5.78033C4.42682 5.48744 4.42682 5.01256 4.71971 4.71967C5.0126 4.42678 5.48748 4.42678 5.78037 4.71967L9.96233 8.90163L14.1443 4.71967C14.4372 4.42678 14.9121 4.42678 15.205 4.71967Z"
  />
</svg>

2. 定义CSS颜色类（或者直接用内联样式）

/* 在全局CSS或组件CSS中定义 */
.fill-red {
  color: red;
}
.fill-blue {
  color: blue;
}
.fill-green {
  color: #2ecc71;
}

3. 在React组件中使用
   现在你只需要给导入的SVG组件添加对应的className，内部的<path>就会自动继承颜色：

import { ReactComponent as Cross } from 'assets/icons/cross.svg';
import React from 'react';

const Alert = (props) => {
  return (
    <div>
      <div className="flex items-start">
        {/* 直接用className设置颜色 */}
        <Cross className="mr-2 fill-red" />
        {props.label}
      </div>
    </div>
  );
};

export default Alert;

如果需要动态传递颜色（比如从props获取），可以直接用内联style：

<Cross className="mr-2" style={{ color: props.iconColor }} />

方法二：使用CSS变量实现更灵活的颜色控制 #

如果你需要更复杂的颜色逻辑，比如多个内部元素不同颜色，可以用CSS变量：

1. 修改SVG文件：将<path>的fill设置为CSS变量，同时设置默认值

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path 
    fill="var(--icon-fill, black)" 
    fill-rule="evenodd" 
    clip-rule="evenodd" 
    d="M15.205 4.71967C15.4978 5.01256 15.4978 5.48744 15.205 5.78033L11.023 9.96229L15.205 14.1443C15.4979 14.4372 15.4979 14.9121 15.205 15.205C14.9121 15.4978 14.4372 15.4978 14.1443 15.205L9.96233 11.0229L5.78033 15.205C5.48744 15.4978 5.01256 15.4978 4.71967 15.205C4.42678 14.9121 4.42678 14.4372 4.71967 14.1443L8.90167 9.96229L4.71971 5.78033C4.42682 5.48744 4.42682 5.01256 4.71971 4.71967C5.0126 4.42678 5.48748 4.42678 5.78037 4.71967L9.96233 8.90163L14.1443 4.71967C14.4372 4.42678 14.9121 4.42678 15.205 4.71967Z"
  />
</svg>

2. 通过className或style设置变量

.fill-red {
  --icon-fill: red;
}

或者动态设置：

<Cross className="mr-2" style={{ '--icon-fill': props.iconColor }} />

为什么这个方案能减少图标数量？ #

现在你只需要维护一份SVG文件，通过className或props就能切换任意颜色，完全不需要为同图标不同颜色创建重复的SVG和React组件，完美解决你的需求！

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