React-Js中react-icons图标color属性不生效问题求助

常见解决方案 #

1. 用style属性直接设置fill值 #

绕开color参数，直接通过style指定SVG的fill属性，这是最直接可靠的方式：

<TbCircleCheckFilled size={24} style={{ fill: 'red' }} />

2. 排查CSS样式覆盖问题 #

全局CSS或组件内的样式可能强制设置了SVG的fill属性，覆盖了color参数。可以给图标加自定义类名，针对性设置样式：

<TbCircleCheckFilled size={24} className="check-icon" />

对应的CSS：

.check-icon {
  fill: red !important;
}

3. 升级react-icons版本 #

部分旧版本的react-icons对部分图标库的color参数支持存在兼容性问题，尝试升级到最新版本：

npm update react-icons
# 或使用yarn
yarn upgrade react-icons

4. 确认图标是否适配color属性 #

少数第三方图标可能未适配react-icons的color参数，这种情况下优先使用style设置fill的方案即可解决。

内容的提问来源于stack exchange，提问作者AdrielBlessedZ