无法修改BiHomeAlt、BiSlider、FaTasks等React图标颜色的问题咨询

你使用的IconContext.Provider全局配置写法本身符合react-icons的官方规范，配置不生效属于部分图标的已知适配问题。

为什么部分图标无法修改颜色 #

确实存在部分react-icons图标无法直接通过IconContext或外层props修改颜色的情况，核心原因如下：

• react-icons整合了数十个第三方图标库（你用到的Fa前缀为Font Awesome图标、Bi前缀为Box Icons图标），不同图标库的原始SVG实现存在差异：部分图标在原始导出时就给内部的<path>等元素硬编码了内联的fill、stroke属性，这类内联样式的优先级高于你通过IconContext或外层props传入的属性，因此会导致自定义配置被覆盖。
• 可通过以下方案解决该问题：
  • 方案1：使用CSS强制覆盖，给目标图标添加自定义类名，指定内部path的样式优先级：

    .custom-icon path {
      fill: red !important;
      /* 如果是描边类图标，再新增 stroke: red !important; */
    }
    

    对应组件写法：

    <FaTasks className="custom-icon" />
    

  • 方案2：直接给图标组件传入style属性指定样式，针对无硬编码颜色的图标可直接生效：

    <FaTasks style={{color: 'red', fontSize: '40px'}} />
    

stroke、fill、color三者的区别 #

三个属性针对SVG图标的作用完全不同，具体差异如下：

• fill：SVG元素的原生填充色属性，控制图标内部实心区域的颜色，绝大多数常规图标都是通过fill属性实现着色的。
• stroke：SVG元素的原生描边色属性，控制图标边缘线条的颜色，仅针对带描边效果的线性图标生效，普通实心图标设置该属性不会产生视觉变化。
• color：标准CSS文本颜色属性，react-icons中绝大多数图标默认将fill值设置为currentColor，此时设置color属性相当于间接修改fill的值，是更简便的图标着色方式。

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