React 图标 - 更改背景颜色答案

【问题标题】：React icons - Change background colorReact 图标 - 更改背景颜色
【发布时间】：2021-03-25 15:40:34
【问题描述】：

目前正在使用网站上的 react-icons，但遇到了 svg 和样式问题。

到目前为止，我尝试使用 git repo 上显示的 React-Icons {IconContext.Provider} 以及使用 fill、stroke。我还尝试使用上下文提供程序添加一个 CSS 类，然后在模块中使用 CSS 属性设置 svg 的背景颜色，但这似乎也不起作用。

设置 SVG 的背景颜色最简单的方法是什么？

使用 stroke 和 fill 它只为实际图标本身着色，因为那是正在绘制的矢量。

Icon 作为 StyledCard 的 prop 传入。

 <StyledCard
     heading="Express"
     techIcon={<FaAngleDoubleRight color="#808080" size={80} stroke="black" strokeWidth=".3"/>} />

【问题讨论】：

【解决方案1】：

在笔划内使用currentColor，它将被父颜色替换。

例子：

<StyledCard
     heading="Express"
     techIcon={<FaAngleDoubleRight size={80} stroke="currentColor" strokeWidth=".3"/>} 
/>

【讨论】：