Vant UI中结合阿里iconfont实现自定义图标解决图标不足

时间:2024-03-08 21:19:51

问题的导火索

    官方自定义图标直通车:  https://youzan.github.io/vant/#/zh-CN/icon

    因为Vant中的icon很少,只有一些基础常用的图标,但是在实际项目中UI设计会根据自己的项目设计一套风格图标,那么就需要在Vant中自定义图标,官方是提供了怎么自定义图标说明的。

 

问题的铺垫

       阿里 iconfont 直通车:https://www.iconfont.cn/

  1、新建iconfont项目

       将设计好的UI 图标上传至这个项目中

 

 PS:提醒 这里最好把项目的前缀统一设置一下,方便后续的操作,后面的文件会用到这个前缀。

 

 

 

 

 

2.将项目下的压缩包下载到本地、然后把iconfont.cssiconfont.ttf复制到项目的assets/css文件夹中 

 

 

 

 

 

 

3、编辑iconfont.css文件中标红位置、将你项目名替换、并在main.js中引进iconfont.css文件

 

 

 

4、页面使用、可以参考官方文档设置图标颜色、大小等

<van-icon class-prefix="my-icon" name="dian"  size="36px"  color="#00CC14"  style="padding: 5px" />

  

 

 

效果图

 

 

PS:这样就可以愉快的使用了!!!