扩展icon

简介: 扩展icon

VantUI 默认提供的 icon 在真正项目中大概率上是不够用的,所以我们要扩展可用的 icon


阿里巴巴矢量图库

为了快速开发(省事),直接利用阿里巴巴矢量图库来找我们所需要的 icon


创建项目,将图标加入到项目,之后项目要配置 FontClass/Symbol 前缀和 Font Family ,如下所示:

iconfont项目配置.png


注意

我们这里将 FontClass/Symbol 前缀设置成了 van-icon-Font Family 设置成了 van-icon 是有寓意的。这个是VantUI默认的配置,网上有很多文章这里都是配置的其他名称,然后引用的时候加一个 class-prefix ,这样确实也行,但是遇到 icon 引用的就不行了,比如:Grid 宫格中就无法直接使用自定义图标,使用上述配置可以保证这里也能支持,问题就是可能和原有图标名称冲突


项目引入

接下来将项目下载到本地,下载下来的是一个 download.zip 的压缩包,解压后将里面的 iconfont.cssiconfont.tfficonfont.wofficonfont.woff2 复制到项目的 /src/assets/iconfont 文件夹下,并在 main.js 文件中引入,如下所示:

项目引入配置.png


接下来就正常使用即可。

目录
相关文章
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
349 0
|
消息中间件 SpringCloudAlibaba 资源调度
SpringCloudalibaba 与 SpringCloud 区别 | 学习笔记
快速学习 SpringCloudalibaba 与 SpringCloud 区别
3520 0
|
10月前
|
人工智能
AniDoc:蚂蚁集团开源 2D 动画上色 AI 模型,基于视频扩散模型自动将草图序列转换成彩色动画,保持动画的连贯性
AniDoc 是一款基于视频扩散模型的 2D 动画上色 AI 模型,能够自动将草图序列转换为彩色动画。该模型通过对应匹配技术和背景增强策略,实现了色彩和风格的准确传递,适用于动画制作、游戏开发和数字艺术创作等多个领域。
381 16
AniDoc:蚂蚁集团开源 2D 动画上色 AI 模型,基于视频扩散模型自动将草图序列转换成彩色动画,保持动画的连贯性
|
11月前
|
开发框架 前端开发 Android开发
Ionicons图标库: 让网页栩栩生辉,Ionic Framework的经典之作,图标库新标杆!
欢迎来到程序视点,我是小二哥。今日分享:Ionicons,一个免费开源、高性能的图标库,适用于Web、APP及桌面应用。它拥有1300多个图标,支持按需加载,提供多种风格选择,易于集成使用。详情见文,欢迎点赞分享!
222 2
|
Java Linux 网络安全
在Linux上搭建Maven仓库的实战教程
在Linux上搭建Maven仓库的实战教程
662 0
|
12月前
|
Java
在Java多线程编程中,实现Runnable接口通常优于继承Thread类
【10月更文挑战第20天】在Java多线程编程中,实现Runnable接口通常优于继承Thread类。原因包括:1) Java只支持单继承,实现接口不受此限制;2) Runnable接口便于代码复用和线程池管理;3) 分离任务与线程,提高灵活性。因此,实现Runnable接口是更佳选择。
227 2
|
SQL Oracle 关系型数据库
达梦数据配置兼容
达梦数据配置兼容
496 0
|
安全 Linux 网络安全
如何使用Nmap进行端口扫描和服务识别?
如何使用Nmap进行端口扫描和服务识别?
1233 0
|
容器
塔防游戏开发实战教程(1):实现防守塔,添加敌人的路径点
塔防游戏开发实战教程(1):实现防守塔,添加敌人的路径点
297 0
塔防游戏开发实战教程(1):实现防守塔,添加敌人的路径点
|
存储 JSON NoSQL
Redis中当存储数据为List集合时,如何控制集合内每个数据元素的生命周期
Redis中当存储数据为List集合时,如何控制集合内每个数据元素的生命周期
649 0