javascript - 我们如何减少 React 项目中 svg 图标的数量？

Question

我正在开发一个assets/icons文件夹内有大约 100 个图标的项目。一些图标非常相似，例如蓝色和红色的垃圾桶（删除）图标，以及三种不同颜色的检查图标。

我们如何将颜色作为 svg 文件中的道具传递。这样我们就可以尽可能地减少图标的数量。

注意：我们不想制作特定的反应组件并将颜色作为道具传递。

这是我的代码的一个工作示例。className="fill-red"将整个填充颜色<svg />。但是我们如何在它的嵌套元素中填充颜色，比如 in<path/>或者可能是<rect/>

import { ReactComponent as Cross } from 'assets/icons/cross.svg';
import React from 'react';
const Alert = (props) => {
  return (
    <div>
      <div className="flex items-start">
        <Error className="mr-2 fill-red" />
        {props.label}
      </div>
    </div>
  );
};

export default Alert;

这是我的 cross.svg

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path 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>

标签： javascripthtmlcssreactjssvg