在前端开发中，很多时候需要使用图标来丰富页面内容，添加更多的可视化元素。使用图标可以使得页面更加美观，同时也可以增加用户交互的友好性。为了避免每次都手动添加图标，我们可以使用一些第三方库，例如 @styled-icons/open-iconic 来简化图标的添加过程，从而提高开发效率。
什么是 @styled-icons/open-iconic 包？
@styled-icons/open-iconic 是一个基于 React 的开源组件库，提供了一系列开源的 Open Iconic 图标，可以让我们很方便的在 React 应用中使用。
怎么使用 @styled-icons/open-iconic 包？
使用 @styled-icons/open-iconic 包很简单，首先在项目中安装该包，可以使用 npm 或 yarn 命令：
npm i @styled-icons/open-iconic
或者
yarn add @styled-icons/open-iconic
安装完成后，我们就可以在 React 组件中使用该图标库中提供的图标了。例如，我们要在组件中使用一个 menu 图标，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ----------------------------
----- ----------- - -- -- -
------ -
-----
-------- -- -- --------------
----- --
------
--
--
------ ------- ------------在上面的代码中，我们首先在组件中引入了 @styled-icons/open-iconic 包中的 Menu 图标，然后在返回的 JSX 中就可以直接使用该图标。
如何自定义图标样式？
除了直接使用 @styled-icons/open-iconic 中提供的图标，我们还可以自定义这些图标的样式，包括修改大小、颜色和旋转角度等。
修改大小
要修改图标的大小，只需要在组件中传入 size 属性即可。例如：
<Menu size="32" />
上面使用 size 属性将图标的大小设置为 32px。
修改颜色
要修改图标的颜色，只需要在组件中传入 color 属性即可。例如：
<Menu color="red" />
上面使用 color 属性将图标的颜色设置为红色。
旋转角度
要旋转图标，只需要在组件中传入 rotate 属性即可。例如：
<Menu rotate="90" />
上面使用 rotate 属性将图标逆时针旋转 90 度。
总结
@styled-icons/open-iconic 包是一个非常好用的图标库，方便我们在项目中快速添加图标，并且可以根据需要自定义样式。在使用该包时，我们需要注意安装和引用问题，以及在代码中使用正确的属性来达到自定义效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf5b5cbfe1ea06105fa