reactjs - 如何设计 React-Icons 样式

Question

我想弄清楚如何设计我使用 react-icons 导入的图标的样式.

特别是，我希望能够创建类似于以下内容的外观:

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

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

有谁知道我该怎么做(或者他们可以推荐一个可以帮助我解决这个问题的不同图书馆)？

Answer 1

使用 IconContext如 Docs 中所述.

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

要定位特定的图标组件，您可以使用 style prop 或在组件本身上使用相同的 API(见 Configurations):

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

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