vant自定义引入iconfont图标

我也算是使用vant UI的初学者，但是我这个人比较喜欢思考一些问题，喜欢钻研一些问题，2333.

想要了解vantUI的可以点击https://youzan.github.io/vant/#/zh-CN/intro

因为vantUI给的图标非常少，为了满足自己的需求，就应该找到一种方法来向vant添加自己自定义的图标，对于自定义图标我第一时间想到的就是阿里的iconfont矢量图库，相信大家不会陌生，我找到了一种引入vant引入iconfont图标的方法，接下来给大家介绍这个方法。

在开始前，有一些准备工作，应该把自己需要的iconfont图标下载到本地，并把它添加进你的vue项目里，例如我就把下载到本地的iconfont图标文件放到 src/assets 目录下，如图：

然后在入口文件main.js里引入iconfont.css文件

这样开始前的准备工作就完成了，接下来就是关键：

1. 查看vant的文档可以知道，要想使用图标，使用的是 van-icon 这个组件https://youzan.github.io/vant/#/zh-CN/icon

引入icon组件

之后就可以使用 <van-icon /> 来引入图标，name属性就是图标的名称，如果你想使用vant提供的图标，那么在可以看官方文档https://youzan.github.io/vant/#/zh-CN/icon，在右边有图标和图标相应的名称

这是vant图标使用，接下来就是iconfont图标的使用

按照我这个格式来引入iconfont图标：

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

其中 class="iconfont"  class-prefix='icon' 是 必须的，不能省，而 name属性的值就是 iconfont图标的名称，举个例子：

可以看见 wang_light 就是这个图标的名称，直接把这个名称丢进 name属性里就可以了，事实上iconfont图标的名称你是不可以直接复制的，只可以复制他的类名，即 icon-wang_light，这个时候只需要把前缀 icon- 删掉，剩下的就是图标的名称了。

实际效果如图：

可以看见就可以成功引入了，但是为什么要使用 <van-icon class="iconfont" class-prefix='icon' name='wang_light' /> 这种方式引入呢？不告诉你（>3<）...