Vant使用自定义图标(阿里图标)

前言

阿里图标官网
备用地址： https://www.iconfont.cn/

添加图标

1、进入官网添加图标，如箭头所示

2、复制如图选中的文件，粘贴项目中的src/assets/icon_font/目录下

3、在main.js引入图标css

//引入自定义图标

import '@/assets/icon_font/iconfont.css'

注意：这里需要注意一下

import '@/assets/icon_font/iconfont.css'一定要写全而不能是

import '@/assets/icon_font/iconfont' （实际上导入的是iconfont.js文件），因为这个导致图标一致不显示耽误了我半天时间排查错误

4、vant组件中使用自定义icon

如果是单色图标的话下面写法：

<van-icon class="iconfont" class-prefix="icon" name="a-allroundservice" />

<div>

<i class="iconfont icon-a-allroundservice"></i>

</div>

如果是多色图标的话下面写法：

import '@/assets/icon_font/iconfont.js'

<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-xunzhang"></use>

</svg>

    <van-steps direction="vertical" :active="0"><van-step><template #active-icon><!-- <div class="iconfont icon-job"></div>--><svg class="icon" aria-hidden="true" width="20" height="20"><use xlink:href="#icon-xunzhang"></use></svg></template><div class="container"><h3>【城市】物流状态1</h3><p>2016-07-12 12:40</p></div></van-step><van-step><div class="container"><h3>【城市】物流状态2</h3><p>2016-07-12 12:40</p></div></van-step></van-steps>