VantUI
默认提供的 icon
在真正项目中大概率上是不够用的,所以我们要扩展可用的 icon
。
阿里巴巴矢量图库
为了快速开发(省事),直接利用阿里巴巴矢量图库来找我们所需要的 icon
。
创建项目,将图标加入到项目,之后项目要配置 FontClass/Symbol
前缀和 Font Family
,如下所示:
注意
我们这里将 FontClass/Symbol
前缀设置成了 van-icon-
, Font Family
设置成了 van-icon
是有寓意的。这个是VantUI默认的配置,网上有很多文章这里都是配置的其他名称,然后引用的时候加一个 class-prefix
,这样确实也行,但是遇到 icon
引用的就不行了,比如:Grid 宫格中就无法直接使用自定义图标,使用上述配置可以保证这里也能支持,问题就是可能和原有图标名称冲突。
项目引入
接下来将项目下载到本地,下载下来的是一个 download.zip
的压缩包,解压后将里面的 iconfont.css
、 iconfont.tff
、 iconfont.woff
、 iconfont.woff2
复制到项目的 /src/assets/iconfont
文件夹下,并在 main.js
文件中引入,如下所示:
接下来就正常使用即可。