我也算是使用vant组件 UI的初学者,但是我这个人比较喜欢思考一些问题喜欢钻研一些問题,2333.
想要了解vant组件UI的可以点击
因为vant组件UI给的图标非常少为了满足自己的需求,就应该找到一种方法来向vant组件添加自己自定义的图标對于自定义图标我第一时间想到的就是阿里的iconfont矢量图库,相信大家不会陌生我找到了一种引入vant组件引入iconfont图标的方法,接下来给大家介绍這个方法
在开始前,有一些准备工作应该把自己需要的iconfont图标下载到本地,并把它添加进你的vue项目里例如我就把下载到本地的iconfont图标文件放到 src/assets 目录下,如图:
这样开始前的准备工作就完成了接下来就是关键:
之后就可以使用 <van-icon /> 来引入图标,name属性就是图标的名称如果你想使用vant组件提供的图标,那么在可以看官方文档在右边有图标和图标相应的名称
这是vant组件图标使用,接下来就是iconfont图标的使用
按照我这个格式来引入iconfont图标:
可以看见 wang_light 就是这个图标的名称直接把这个名称丢进 name属性里就可以了,事实上iconfont图标的名称你是不可以直接复制的只可以複制他的类名,即 icon-wang_light这个时候只需要把前缀 icon- 删掉,剩下的就是图标的名称了