痛點(diǎn)

Vant中的icon很少，只是提供了一些常用的圖標(biāo)，但是在實(shí)際項(xiàng)目中UI設(shè)計(jì)有自己的一套風(fēng)格圖標(biāo)，那么就需要在Vant中自定義圖標(biāo)，官方是提供了怎么自定義圖標(biāo)說(shuō)明的。
https://youzan.github.io/vant/#/zh-CN/icon

開(kāi)始

1. 上傳圖標(biāo)

我的項(xiàng)目都是叫UI設(shè)計(jì)把圖標(biāo)上傳到https://www.iconfont.cn/，然后把項(xiàng)目分享給我。

image.png

image.png

image.png

2. 下載到本地

把項(xiàng)目下載到本地，然后把iconfont.css和iconfont.ttf復(fù)制到項(xiàng)目的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.頁(yè)面中使用

<van-icon class-prefix="my-icon" name="liebiao" />

image.png

6.其他

可以看到在van-icon中是添加了class-prefix="my-icon"這個(gè)屬性的，如果是想把這個(gè)去掉，只寫(xiě)name屬性，可以把前面說(shuō)到的前綴名稱修改為 vant-icon-，然后iconfont.css中做相應(yīng)的修改就可以了。

2019-05-24 補(bǔ)充

上圖的圖標(biāo)是斜的，改如何解決？

方式一（推薦）

給my-icon加上相應(yīng)的樣式

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。
不推薦這樣做，引文這樣不容易區(qū)分框架圖標(biāo)和自己自定義的圖標(biāo)，并且還有可能由于名字重復(fù)覆蓋框架圖標(biāo)。