uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标

缺乏、安全感 2022-11-29 13:13 230阅读 0赞

## 一.图标下载 ##

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70][]

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

## 二.把图标引入到项目 ##

1.先来看uniapp项目结构

![20200821164534225.png][]

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

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

![20200821164835958.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 2][]

如图，这样我们就可以把这个组件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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 3][]

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

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70]: /images/20221124/96d1ad02bdcc4b4e8063e8904abf0623.png
[20200821164534225.png]: /images/20221124/7b9d2a27ed6c4c55bf201d9e9a58c57e.png
[20200821164835958.png]: /images/20221124/52eaaab8c86245e3a0bc34b52a820e86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 1]: /images/20221124/9dc4424334774b6b91961b190590a254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 2]: /images/20221124/396033bc170e418fb8af226bdd8f3356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 3]: /images/20221124/316de86fd677406c9c78301f6b519217.png