Vant组件库引入阿里矢量图添加自己喜欢的 ICON

📃目录跳转

一.矢量图下载

💨使用CDN方式

当然你也可以使用官方的CDN镜像，只要把链接内容复制到保存成.less文件,当然你们也可以保存成.css文件由于我系统文件使用的是less的 CSS 预处理语言。

在这里插入图片描述

网址内容如下，其中src:url内的网址是阿里矢量图CDN的地址,为了稳定我们可以自己把文件下载下来保存到项目中

在这里插入图片描述

🎉下载本地（推荐）

选择Font class 选项然后点击下载到本地。

在这里插入图片描述

下载解压得到以下文件，我们只要把iconfont.css文件内容复制到项目中

在这里插入图片描述

在项目中创建文件，并且把iconfont.css内容复制进去，这个时候url提示报错我们需要引入相关文件，引入的文件都在下载的文件夹中。

在这里插入图片描述

并且设置相对路径把导入的文件引入

在这里插入图片描述

在把.iconfont更改成.icon这样Vant就可以通过设置前缀识别使用那个图标

在这里插入图片描述

更改后效果：

在这里插入图片描述

看后面流程就知道我为什么要这样操作。

二.Vant引入Icon🗺️

完成上面步骤以后我们查看官网是怎么介绍的

在这里插入图片描述

在main.js文件导入我们的文件

在这里插入图片描述

🎃 使用方式

在需要的地方使用以下标签

<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />
1
2

如我要使用阿里矢量图中的icon-saoyisao该图标

在这里插入图片描述

在需要的地方使用

 <van-icon class-prefix="icon" name="lianjie" />
1

在这里插入图片描述

其中作用：
class-prefix：图标前缀在这里 icon相当于是 icon-
name：图标名称在这里表示使用这个 saoyisao图标

🚀 运行效果：

运行后刷新界面：

在这里插入图片描述
至于为什么会图标会飘上去那是因为没有在van-tabbar配合van-tabbar-item 使用因为图标是自定义的所以要看官网自定义要如何修改。

修改代码

在这里插入图片描述

运行效果

现在展示的效果是不是更棒了

在这里插入图片描述

相关阅读:
【设计模式】适配器模式
DECLARE_DYNAMIC提示缺少显示类型指定
计算机提示vcomp120.dll丢失怎样修复，vcomp120.dll丢失的4个修复方法分享
Mybatis常用代码
java基于springboot+vue的在线点餐外卖系统 elementui
LLVM学习笔记（60)
在Winform界面中使用自定义控件，丰富界面的效果处理
angular2网页前端执行流程
【从零开始学习 SystemVerilog】3.3、SystemVerilog 控制流—— if-else（ ‘unique‘ 和 ‘priority‘）
vivado产生报告阅读分析14-时序报告10

原文地址：https://blog.csdn.net/qq_45502336/article/details/127798373

Vant组件库 引入 阿里矢量图 添加自己喜欢的 ICON

📃目录跳转

一.矢量图下载

💨使用CDN方式

🎉下载本地（推荐）

二.Vant引入Icon🗺️

🎃 使用方式

🚀 运行效果：

Vant组件库引入阿里矢量图添加自己喜欢的 ICON