css - CSS中的Fortawesome reactjs图标颜色

Question

我有几个 Fontawesome 标签分布在几个组件中。他们的颜色属性目前被硬编码为自定义颜色 HEX 代码。我想把这个颜色代码集中在 css 中，这样如果需要我就可以把它改到一个地方。这可能吗？

<FontAwesomeIcon icon={faThumbsUp} 
                        size="sm" color="#7ACC35"/>

Answer 1

是的，您可以这样做，只需使用className并定义您的 css 文件

.CustomColor {
  color: red;
}

.CustomColor2 {
  color: green;
}

.CustomColor3 {
  color: blue;
}

<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor2" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor3" />

Codesandbox 演示