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