简介
在前端开发中，经常需要使用日常表情或者自定义图标。ojb（oh, just icons）就是一个简单易用的 npm 包，它提供了成千上万的图标。
安装
在项目中使用 ojb，需要使用 npm 进行安装：
npm install --save oji
使用
基本用例
使用 ojb 非常简单，只需要在页面引入对应的图标即可。
HTML：
<i class="oji oji-smile"></i>
CSS：
@import "node_modules/oji/oji.css";
ojb 的默认样式使用 font-size、color 和 line-height。当使用不同大小的图标时，应该设置正确的 font-size 以匹配默认样式。
自定义图标
ojb 提供了一些基本的图标，但是在实际的开发中，我们可能需要自定义一些图标以匹配项目的需求。
可以使用 Oji 网站 来创建自定义的图标。创建完成后，将生成的 JSON 文件下载下来，然后将它存放在项目路径下的某个地方。
在项目中引入这个 JSON 文件：
import oji from 'oji'; import customIcons from './custom-icons.json'; oji.extend(customIcons); console.log(oji.getIcons());
这段代码将自定义的图标加载到 oji 中。此时，这些图标就可以在页面中使用了：
<i class="oji oji-my-custom-icon"></i>
替换默认的样式
当需要将 ojb 的图标嵌入到一个已有的样式中时，可能需要完全替换掉 ojb 的默认样式。例如，如果您想要将图标嵌入圆形背景中，可以按如下方法覆盖样式：
-- -------------------- ---- ------- ------ - ----------------- ----- -------------- ---- ------ ----- -------- ------------- ------- ----- ------------ ----- ----------- ------- ------ ----- -
教程总结
在前端开发中使用 oji 非常简单，同时还可以轻松地自定义图标，因此它是一个非常方便实用的 npm 包。当然，如果需要将图标嵌入到已有的样式中，可能需要更多的工作。不过，通过 oji 所提供的扩展和变量，您可以轻松地覆盖默认的样式，以满足自己的设计需求。
示例代码
下面是一个简单的示例，它演示了如何在项目中使用 oji。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----------
----- ---------------- --------------------------------
-------
------ -
----------------- -----
-------------- ----
------ -----
-------- -------------
------- -----
------------ -----
----------- -------
------ -----
-
--------
-------
------
-- ---------- ---------------
-- ---------- ---------------
-- ---------- -------------------
-- ---------- ---------------------
-- ---------- -----------------
---- --------------
-- ---------- ---------------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671a1