Vant 扩展图标自定义图标，以及两种使用方式。方式2使用方便

以此官方图标为例

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=17895

单个添加太慢，打开控制台，输入下面js 并热行，全部选中

Array.from(document.getElementsByClassName("icon-gouwuche1")).forEach(x=>x.click())

从购物车，添加进项目

如上图：

1为项目名，

点3按钮 编辑项目，设置前缀 zt-i3-

点2生成

下载本地，解压，将复制到项目中 src/assets/css/azt-i3/

修改内容. @font-face 内容替换为上图按钮2处生成的

iconfont.css 顶部修改

/*按钮2处生成的*/
@font-face {font-family: "azt-i3";
  src: url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.eot');
  src: url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.woff') format('woff'),
  url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.svg#iconfont') format('svg');
}
/*注意名字,样式修改为与vant默认相同*/
.azt-i3 {
  font-family: "azt-i3" !important;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

iconfont.css 底部插入新样式

/*覆盖van原样式*/
.van-icon {
  position: relative;
  display: inline-block;
  font: normal normal normal 14px/1 vant-icon,azt-i1,azt-i2,azt-i3;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/*tabbar-item 需要的*/
.van-tabbar-item__icon .azt-i3{
  display: block;
  min-width: 1em;
}

main.js导入

import "./assets/css/azt-i3/iconfont.css";

好了，现在有两种方式使用新图标了。注意方式2 里的空格，不可省略

恭喜，图标出来了!

van-tabbar-item 一样的使用方式.标准办法，空格办法都可以

<van-tabbar-item  icon=" azt-i3-zhixianghuishou">

原文地址：https://www.cnblogs.com/DonneZhang/p/12980102.html

Vant 扩展图标 自定义图标，以及两种使用方式。方式2使用方便

Vant 扩展图标自定义图标，以及两种使用方式。方式2使用方便