前言

由于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官网，把新图标加到购物车，删掉不要的图标，重新下载，覆盖文件即可。