介绍
@svg-icons/octicons 是一款可以帮助 web 开发者方便地使用各种 Octicons 图标的 npm 包。Octicons 是 Github 官方的图标库，包含了 180 余个图标，开发者可以利用这些图标快速构建出漂亮的 Web 页面。
@svg-icons/octicons 的主要特点如下：
- 包含了 Github 官方的图标库；
- 以 SVG 格式提供，并在所有现代浏览器中支持；
- 可以拓展，也可以自定义；
- 在使用了该包后，可以在 Web 项目中直接引用使用，也可以 standalone 使用，即不依赖于该包。
安装
使用 NPM 安装该包，需要先在命令行终端中运行以下命令：
npm install @svg-icons/octicons
使用
使用 @svg-icons/octicons 包有两种方法：
- 拓展成 React 组件
可以把 @svg-icons/octicons 包中的每个图标都转成 React 组件。这样，可以直接在 React 项目中使用这些组件。
使用这种方法，需要先安装 react 和 react-dom，其中 react 是 React 库，react-dom 则是用于对 React 进行 Web 编程的库。运行以下命令即可安装：
npm install react react-dom
接着，使用以下代码即可将@svg-icons/octicons 转成 React 组件：
import { ReactComponent as IconName } from "@svg-icons/octicons/build/svg/IconName.svg"; function MyComponent() { return <IconName />; }
- 使用 SVG 标记
使用这种方法，可以直接将@svg-icons/octicons 包中的 SVG 标记贴到静态 HTML 中，或者使用 JavaScript 动态生成 DOM 元素来插入 SVG 标记。这种方法适用于不依赖于任何 JavaScript 框架的 Web 项目。
以下代码演示了如何使用 SVG 标记插入图标：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- -------------- ------------ ------- ------ ---- ---------------------------------- ---------- - -- ---- ----- ------------------- -------- ------ ---- - - - ---- ------ ---- - - - ---- ---- ----------- --------- - -------------- ---- ----------- ----------- ---------- ------------------------------ -- ------ ------- -------展开代码
自定义
借助 @svg-icons/octicons 包，可以轻松拓展自己的图标库。具体做法是，先安装 @svg-icons/octicons 包，然后将需要自定义的图标标为 package.json 的 dependencies，执行命令 npm install，即可自定义图标了。
总结
使用 @svg-icons/octicons 包可以快速地引入 Github 官方的图标库，使得 web 开发者可以轻松打造出漂亮的 Web 页面。该包非常灵活，可以自由选择是否借助于 React 组件的方式，同时还支持自定义。如果您正在开发 Web 项目，并且希望快速使用图标库，@svg-icons/octicons 包绝对是一个值得推荐的选择。
示例代码
可以在以下代码 Sandbox 中查看示例代码：
https://codesandbox.io/s/svg-iconsocticons-demo-4ujmx
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24c2173b0ab45f74a8b920
