uc-icon 是一款可以快速引入字体 icon 的 npm 包。字体 icon 原理是通过替换字体实现多种样式的图标展示，相比于传统图片 icon 具有更快的加载速度和更易维护的特点。
安装
可以通过 npm 安装 uc-icon：
npm install uc-icon --save
引入
在 Vue 项目中可以在 main.js 中全局引入：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- --------- --------------- --- ----- ------- - -- ------- -----------------
在其他项目中可以在需要使用的组件中单独引入：
-- -------------------- ---- -------
------ ------ ---- ---------
------ ------- -
----- --------------
----------- -
------
-
-- ---
-使用
在模板中使用 <uc-icon> 标签，通过 type 属性指定需要展示的图标：
<uc-icon type="arrow-up"></uc-icon>
也可以通过 size 属性控制图标大小，通过 color 属性控制图标颜色：
<uc-icon type="arrow-up" size="24px" color="#333"></uc-icon>
如果需要添加图片描述或者提示，可以在标签内使用 title 属性：
<uc-icon type="arrow-up" title="上移"></uc-icon>
uc-icon 支持的图标可以在官方网站 uc-fonts.lilithgame.com 上查看，展示了包括游戏中经常使用的设置、道具、邮件等图标。
示例代码
下面是一个简单的 Vue 组件示例，展示了 uc-icon 的使用：
-- -------------------- ---- -------
----------
-----
-------- -------------- ----------- --------------- ---------------------
-------- ----------- ----------- ------------ ---------------------
-------- -------------------- ----------- --------------- ---------------------
------
-----------
--------
------ ------ ---- ---------
------ ------- -
----- --------------
----------- -
------
-
-
---------结语
uc-icon 提供了一种快速、简单、易维护的字体 icon 引入方式，适合用于各种前端项目中，可以提高项目的开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f82238a385564ab6bcf