如何设置 React-Icon 样式

Question

我试图弄清楚如何设置我使用 react-icons 导入的图标的样式。

特别是，我希望能够创建类似于此的外观：

也就是说，我想添加背景颜色、填充、边框半径等。但是，我找不到简单的方法来做到这一点。

我可以添加一个尺寸和颜色道具，这将改变图标的实际尺寸和颜色。但是我没有简单的方法来改变其他元素。

有谁知道我该怎么做（或者他们可以推荐一个可以帮助我的不同图书馆）？

原文由 Moshe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 IconContext 如 文档 中所述。

 function BlueLargeIcon() {
  return (
    <IconContext.Provider
      value={{ color: 'blue', size: '50px' }}
    >
      <div>
        <FaBeer />
      </div>
    </IconContext.Provider>
  );
}

要针对特定的图标组件，您可以使用 style 或在组件本身上使用相同的 API（请参阅 配置）：

 const style = { color: "white", fontSize: "1.5em" }
<FaFacebookF style={style} />

// API
<FaFacebookF color="white" fontSize="1.5em" />

原文由 Dennis Vash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

某些图标的颜色无法更改。例如，我尝试通过以下方式更改 { GrClose } 图标的颜色：

 <GrClose
    className="icon"
    style={{
      position: 'absolute',
      top: '20px',
      right: '20px',
    }}
    size="50px"
    color="white"
    onClick={handleExit}
/>

它只是没有改变，当我用 { AiOutlineClose } 图标替换我的图标时它起作用了！

原文由 Uttkarsh Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议