简介
在前端开发过程中，利用图标丰富页面和交互效果是一个很常见的需求。而 @styled-icons/octicons 就是一个可以让我们快速使用 Octicons 图标的 npm 包。
Octicons 是 GitHub 的一套开源图标库，里面包含了很多常用的图标，例如：星星、logo、代码等等。同时，@styled-icons/octicons 还可以自定义图标颜色、大小和样式。
安装
在安装之前，因为 @styled-icons/octicons 依赖于 styled-components，所以需要先安装 styled-components。
npm install styled-components
再安装 @styled-icons/octicons：
npm install @styled-icons/octicons
使用
- 在需要使用的组件中引入：
import { Star } from '@styled-icons/octicons/Star'- 在组件中使用
-- -------------------- ---- -------
----- ----------- - -----------
------ -----
------- -
------ -------
-
--
----- ----------- - -- -- -
------ -
-------------
----- --------- --
--------------
-
-- 自定义颜色、大小、样式
-- -------------------- ---- -------
----- ----------- - -----------
------ ------- -- --------------- -- -------- -- ---- ----- ----
----------- --- ---- ------------
------- -
------ ------- -- ---------------- -- ---------- -- ---- ----- -- ----- --
---------- ----------- -- ------
-
--
----- ----------- - -- -- -
------ -
------------ ---------------- -----------------------
----- --------- --
--------------
-
-总结
通过使用 npm 包 @styled-icons/octicons，我们可以轻松使用 Octicons 图标，并自定义图标颜色、大小和样式。同时，这也是一个学习如何使用组件库和 styled-components 的很好的例子。
示例代码：https://codesandbox.io/s/styled-iconsocticons-demo-iwqug
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf5b5cbfe1ea06105f9