Vant UI中使用iconfont实现自定义图标

痛点

Vant中的icon很少，只是提供了一些常用的图标，但是在实际项目中UI设计有自己的一套风格图标，那么就需要在Vant中自定义图标，官方是提供了怎么自定义图标说明的。
https://youzan.github.io/vant/#/zh-CN/icon

开始

1. 上传图标

我的项目都是叫UI设计把图标上传到https://www.iconfont.cn/，然后把项目分享给我。

image.png

这里最好把项目的前缀统一设置一下，方便后续的操作，因为后面会用到这个前缀。这里我修改成 my-icon-前缀。

image.png

image.png

2. 下载到本地

把项目下载到本地，然后把iconfont.css和iconfont.ttf复制到项目的assets/css文件夹中。

image.png

image.png

3.修改iconfont.css文件

image.png

@font-face {
  font-family: 'my-icon';
  src: url('./iconfont.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

这里的font-family就用到前面修改的前缀名称。

4.修改main.js文件

image.png

import "./assets/css/iconfont.css";

5.页面中使用

image.png

6.其他

可以看到在van-icon中是添加了class-prefix="my-icon"这个属性的，如果是想把这个去掉，只写name属性，可以把前面说到的前缀名称修改为 vant-icon-，然后iconfont.css中做相应的修改就可以了。

2019-05-24 补充

上图的图标是斜的，改如何解决？

方式一（推荐）

给my-icon加上相应的样式

image.png

.my-icon {
  font-family: 'my-icon';
  position: relative;
  font: 0.37333rem/1 "my-icon";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

方式二

直接把iconfont.css文件中的my-icon全部换成van-icon。
不推荐这样做，引文这样不容易区分框架图标和自己自定义的图标，并且还有可能由于名字重复覆盖框架图标。