reactjs - 如何在 React 5 中获得很棒的双色调字体

Question

使用基本的 CSS 和 HTML，甚至在 AngularJS 中，我们可以使用以下代码为很棒的字体图标添加双色调:

<div class="fa-3x">
  <i class="fad fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
</div

我们如何使用以下库在 ReactJS 中实现相同的目标？

@fortawesome/fontawesome-svg-core, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome,

我需要有关主要颜色和次要颜色的样式部分的帮助

到目前为止我尝试过的是:

<FontAwesomeIcon icon={faChartPie} style={{"--faPrimaryColor": "#7efff5","--faSecondaryColor":"#ffcccc"}}/>

还有这个

<FontAwesomeIcon icon={faChartPie} primaryColor="#7efff5" secondaryColor="#ffcccc" color="#ffcccc"/>

但都没有帮助。

Answer 1

这应该有效:

<FontAwesomeIcon icon={faChartPie} style={{"--fa-primary-color": "#7efff5","--fa-secondary-color":"#ffcccc"}}/>