uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标

一.图标下载

1. 话不多说上网址https://www.iconfont.cn/

2.先选择图标加入购物车，记得先登录

3.去购物车，把图标添加到项目，没有项目的创建一个项目（为啥要创建项目不直接下载？答：方便后期修改图标和添加图标）

4.去资源管理点击我的项目，下载到本地。（联网资源会导致微信小程序及app等出现不显示的问题）

​

解压后的目录如下，现在我就做好准备工作了

二.把图标引入到项目

1.先来看uniapp项目结构

​

好多开发人员喜欢把资源放在static目录下，其实这样会导致打包的时候出现重复，增加包的体积

所以我们这里放置在了assets目录下

​

现在还没完，我们需要改一下css文件的文件引入地址（为啥要改css文件的文件引入地址？答：有些版本会出现不兼容的问题，导致图标显示不出来）

​

在这里我改了iconfont的名字，改成了jpicon，这样的话我们在写组件的时候就不能用iconfont，必须用jpicon

​​​​

如图，这样我们就可以把这个组件import引入使用了

图标我们肯定是希望全局引入，方法如下

找到main.js文件，在文件里面添加

import jIcon from "@/components/j-icon/j-icon.vue"

Vue.component('j-icon', jIcon)

其中      import    组件名称      from "组件地址"

Vue.component('使用的名称', 组件名称 )

使用：

<j-icon type="css属性值"  size="60" color="#fff"></j-icon>

​

这样我们的图标就引入完成了