如何更改 React 图标的填充颜色？答案

【问题标题】：How to change fill color for React icons?如何更改 React 图标的填充颜色？
【发布时间】：2021-05-28 11:50:07
【问题描述】：

我想更改 React 图标的颜色。比如说{AiFillHeart} 图标。我想将其填充颜色更改为红色。我该怎么做？

我试过<AiFillHeart style = {{color: 'red'}}/>。但它不起作用。

【问题讨论】：

标签： css reactjs svg icons react-icons

【解决方案1】：

在编辑器中打开您的 svg 文件。
将每条路径的填充属性改为fill="currentColor"

【讨论】：

【解决方案2】：

您需要知道AiFillHeart 的底层代码是什么样的。假设它返回一个 <svg> 并且您可以将道具传递给该元素，您可以像这样指定 fill 和/或 stroke：

const AiFillTriangle = ({ fillColor, strokeColor }) => {
  return (
    <svg>
      <path d="M150 0 L75 200 L225 200 Z" fill={fillColor} stroke={strokeColor} />
    </svg>
  );
};

ReactDOM.render(
  <AiFillTriangle fillColor="red" strokeColor="blue" />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：