【vant】简单粗暴添加iconfont图标

【vant】简单粗暴添加iconfont图标

在实际的项目中，vant自带的图标不够用，这就需要我们从外部引进图标。但是一张一张的引进图标并存于项目中并不可取，一旦数量过多，就会十分不方便，所以，以下就以最简单粗暴的办法添加iconfont图标。

1.登录官网

登录https://www.iconfont.cn/，这是一个很好用的图标库。

2.选择自己需要的图标，添加到购物车，下载代码。

3.存放到你的项目

下载下来是个压缩包，解压。主要是这些文件。为了方便管理，比如存放到assets/iconfont中，其中demo的那两个文件可以不放进去。打开demo_index，可以查看信息。

4.引用

import "@/assets/iconfont/iconfont.css";

//别忘了引用vant组件
import Vue from 'vue';
import { Icon } from 'vant';
components:{
        [Icon.name]: Icon,
    },
//使用
<van-icon class="iconfont" class-prefix='icon' name='gongjiao' color="green"></van-icon>

name可从demo_index中查看，color可修改颜色，font-size可修改大小

要新增，或者删除的，就要从官网上修改了，再下下来，替换就好了。当然，在这可以批量的修改图标的大小。