uni-app使用阿里图标库中的图标

[221900209陈志滨]

目录

• 1.技术概述
• 2.技术详述
• 1.获取图标
• 2.在 vue 页面使用自定义图标
• 3.总结
• 4.参考文献

1.技术概述

uniapp可以使用以下代码直接使用 uni-icons 中的图标

<uni-icons type="contact" size="30"></uni-icons>

uni-icons 已经收录了日常开发中常用的图标 ，但是因为体积问题 ，不可能一直无限添加新图标 ，所以 uni-icons 也提供了扩展的方法。
即使用 custom-prefix 和 type 属性来自定义图标。

<uni-icons custom-prefix="custom-icon" type="icon-youxi" size="30"></uni-icons>

2.技术详述

1.获取图标

1.1 访问图标库，例如阿里图标库 选择需要的图标，并加入购物车

1.2 点击购物车，选择添加至项目，如没有项目，需要点击下图第二步的图标添加一个项目目录

1.3 确定后进入项目，点击项目设置 ，对图标库进行一些设置：

1.4 项目名称和项目描述根据自己需求填写， fontClass 是图标的前缀 ，需要传入组件type属性，fontFamily 是图标集名称，需要传入组件custom-prefix 属性，字体格式可以只勾选 ttf

1.5 点击保存后 ，可以下载图库库到本地

1.6 下载解压后，需要用到的文件暂时有两个 iconfont.css、iconfont.ttf:

1.7 将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。

1.8 打开 iconfont.css ,修改 @font-face 如下,注意 src 字体文件的引用路径是否正确：

2.在 vue 页面使用自定义图标

2.1 在项目根目录的 App.vue 中，引入上述的 iconfont.css，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在 style 标签有效内容中的最前面

<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>

2.2 使用 custom-prefix 和 type 属性自定义图标

<uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>

3.总结

通过此技术可以使用扩展库中所有的图标，不过需要注意的是，拓展图标本质上使用的是字体，所以不支持多色图标。

4.参考文献

uni-app官网教程