简介
npm包ocon是一个开源的前端图标库，它包含了各种各样的图标，可以轻松地帮助我们在前端开发中使用各种图标。
快速上手
安装 ocon
在终端中运行以下命令来安装 ocon 包：
npm install ocon --save
使用 ocon
在代码中，可以使用以下方法来使用 ocon：
<!--引入 ocon.css--> <link rel="stylesheet" href="./node_modules/ocon/ocon.css"> <!--使用 iconfont--> <i class="ocon ocon-menu"></i><!--menu图标-->
ocon提供的图标类型
ocon包含了许多不同类型的图标，可以根据不同的需求进行选择。包含的类型有：
- arrow
- audio
- circle
- direction
- document
- hardware
- map
- menu
- multimedia
- notification
- social
- weather
ocon提供的图标列表
可以在官方文档中找到所有可用的 ocon 图标。点击这里查看示例页面。
原理分析
ocon 底层使用了 iconfont 技术，以达到高效显示图标的目的。
同时，ocon 提供了大量的图标类型和图标列表，方便我们在前端开发中选择和使用不同的图标。
进阶指导
自定义 ocon 颜色
可以在CSS中，通过以下方式来定义 ocon 图标的颜色：
<i class="ocon ocon-document" style="color: red;"></i>
使用 ocon 的动态功能
ocon 还提供了可自定义的动态功能方法。
例如，执行以下代码可以使图标以指定的速度旋转:
<i class="ocon ocon-document" onclick="this.style.animation='spin 2s linear infinite'"></i>
这样，您就可以以更灵活的方式使用 ocon。
结语
ocon 是一个非常实用的前端工具，可以帮助我们在 UI 设计中使用各种图标，简化我们的开发流程。同时，ocon 也提供了深度定制的功能，可以让我们在使用过程中愈加方便。
快来试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a67187