前言
由于Vant自带的图标实在是太少，所以必须想办法给Vant添加自定义图标。其实Vant已经提供了一个接口来添加图标，我们就来看一下。
第一步，从iconfont的购物车下载代码
打开https://www.iconfont.cn/之后，不要下载单个图标，而是使用购物车功能，选一个或几个图标，添加到购物车，然后去购物车下载代码。
第二步，存到你的vue项目里
比如存到assets/iconfont目录，里面应该是这样子：
image.png
其中两个demo文件可以删。
第三步，去组件里引用
在组件里引用方法是：import "@/assets/iconfont/iconfont.css";
第四步，组件引用Vant的组件
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
第五步，使用组件：
<van-icon class="iconfont" class-prefix='icon' name='search' />
其中，除了name的值之外，其他任何字符不要动。name值就是该图标在iconfont里的名字。比如我这个search，跟vant自带search是不冲突的，vant自带图标的调用方式是<van-icon name="search" />。随便截个图给你看，左侧是iconfont图标，右侧是vant自带的。
image.png
到此，就OK了。给图标设置属性，可以遵循vant-icon组件的规定，也可以直接设样式，比如大小用font-size，颜色用color，就当做普通字对待就行了。
如何添加、更换图标
添加、更换图标都要去iconfont官网，把新图标加到购物车，删掉不要的图标，重新下载，覆盖文件即可。
