Vant 开发--自定义图标的使用

在 vant 组件库里的图标非常少，难以满足开发的需要，所以引入及使用外部的图标库是必要的，在这篇文章中使用的是 阿里巴巴矢量图标库。

一、准备工作

1. 首先要到阿里巴巴矢量图标库里寻找需要的图标，并添加入库

   

   

   点击添加至项目

2. 到 “我的项目” 中查看已添加的图标

   

   有需要的可以自定义项目设置

   

3. 下载图标文件到本地

   

   注意这里是选择的是 Font class

   下载后的内容：

   

二、在 Vue 项目中使用

1. 首先在 Vue 的入口文件 （main.js）引入刚下载的 iconfont.css 文件

   

2. 依旧是在入口文件，引入 vant 组件库中的 icon

   

3. 之后就是 iconfont 图标的使用

   在组件中使用以下格式引入：

   <van-icon class="iconfont" class-prefix='icon' name='wang_light' />

   其中 class="iconfont" class-prefix='icon' 是 必须要有的，name属性的值就是 iconfont 图标的名称，例如：

而在复制代码 时，会有个前缀 “icon-”，在使用时删除即可，这也可以在之前的项目设置里设置。

到此自定义图标的引入及使用就完成了。

[Vant2 组件库文档​]  vant-contrib.gitee.io/vant/v2/#/z… 

\