vue3 动态 svg 图标使用

news/2024/9/18 15:02:23/ 标签: vue.js, javascript, 前端

前言 

在做后台管理系统中,我们经常会用到很多图标,比如左侧菜单栏的图标

当然这里 element-ui 或者 element-plus 组件库都会提供图标

但是在有些情况下 element-ui 或者 element-plus 组件库提供的图标满足不了我们的需求时,这个时候我们就需要自己去网上找一些素材或者UI给我们一些.svg的图标文件

那么这个时候我们如何像使用组件一样很方便地去使用?只需要在需要的地方引入组件、传入图标名字就可以了

vite项目中

如果是vite项目,那么我们就需要用到一个插件 


http://www.ppmy.cn/news/1525254.html

相关文章

【Tools】Prompt Engineering简介

摇来摇去摇碎点点的金黄 伸手牵来一片梦的霞光 南方的小巷推开多情的门窗 年轻和我们歌唱 摇来摇去摇着温柔的阳光 轻轻托起一件梦的衣裳 古老的都市每天都改变模样 🎵 方芳《摇太阳》 大模型中的Prompt Engineering是指为了提高大模型在特定任…

Python教程(二十) : 十分钟入门【PyQt6】

文章目录 专栏列表环境准备1 安装 Python2 安装 PyQt6 创建 PyQt6 项目1 创建项目目录2 创建主 Python 文件 代码书写测试流程1 导入 PyQt6 模块2 创建主窗口类3 创建应用程序实例并运行 核心解析:PyQt6 中的模块示例代码: PyQt6 常用的控件1. QPushButt…

python selenium 显示等待 + EC

python selenium 显示等待 EC expected_conditions是selenium的一个模块,主要用于对页面元素的加载进行判断,包括元素是否存在,可点击等等。 presence_of_element_located(locator)方法:判断一个元素存在于页面中,存…

OpenHarmony(鸿蒙南向开发)——轻量系统芯片移植指南(二)

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ OpenHarmony(鸿蒙南向开发)——轻量系统芯片移植指南(一) Op…

2024-09-11 gdb

回顾 静态库安装指令 sudo yum install -y glibc-static sudo yum install -y libstdc-staticLinux调试器:gdb debug->添加调试信息 release->取消调试信息 gcc/g默认是release,debug:-g 1. gdb的基本命令 l(list) 10 main code.c…

无人机动力系统设计之电调芯片参数选型

无人机动力系统设计之电调芯片参数选型 1. 源由2. 关键因素2.1 电压范围2.2 电流处理能力2.3 控制方式2.4 PWM输出与分辨率2.5 通讯接口2.6 保护功能2.7 支持霍尔传感器与无传感器模式2.8 集成度与外围器件2.9 效率与散热2.10 市场供应与成本 3. 因素阐述3.1 PWM工作频率3.1.1 …

开源FormCreate低代码表单组件的配置项和事件的详解

在使用开源FormCreate低代码表单时,您可以通过各种 props 来定制表单的行为和外观。这些参数允许您控制表单的生成规则、配置选项、双向数据绑定等,为复杂的表单场景提供了强大的支持。 源码地址: Github | Gitee FormCreate组件Props 以下是常用的 pr…

Ubuntu 安装最新 Google Chrome 浏览器

谷歌浏览器使用简单并且用户友好,使用它浏览互联网愉悦至极。许多用户喜欢 Chrome,因为它加载网页又快又流畅。Chrome 提供强大的安全功能,帮助用户保持在线安全。Google Chrome 官方提供了一个 Debian 软件包存储库,基于 Debian …

reg和wire的区别 HDL语言

文章目录 数据类型根本区别什么时候要定义wire小结 数据类型 HDL语言有三种数据类型:寄存器数据类型(reg)、线网数据类型(wire)、参数数据类型(parameter)。 根本区别 reg: 寄存器…

Stable Diffusion绘画 | 生成高清多细节图片的各个要素

在数字艺术领域,AI绘画技术已经逐渐成为艺术创作的新趋势。Stable Diffusion作为一款领先的AI绘画工具,以其生成高清多细节图片的能力备受关注。现在,让我们一起来探索Stable Diffusion生成高清多细节图片的各个要素,开启你的创意…

【鸿蒙】HarmonyOS NEXT星河入门到实战5-基础语法

目录 一、字符串拼接 1.1 常规字符串拼接 1.2 模板字符串hello(符号在键盘的tab上面) 二、类型转换 (数字和字符串) 2.1 字符串转数字 2.2 数字转字符串 三、交互 3.1 点击事件 3.2 状态管理 3.3 计数器案例 四、运算符 4.1 算数运算符 4.2 赋…

五、TOGAF(架构内容框架)

TOGAF架构内容框架(Architecture Content Framework) TOGAF架构内容框架是TOGAF的一个重要组成部分,它提供了标准化的方法来描述企业架构。架构内容框架帮助架构师创建、管理和使用架构工件(Artifacts),这些…

C++之打造my vector篇

目录 前言 1.参照官版,打造vector的基本框架 2.丰富框架,实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸,深度理解代码 迭代器…

1.单例模式

目录 简介 饿汉式 懒汉式 双重检测锁式 静态内部类式 枚举单例 测试 测试单例模式: 测试五种单例模式在多线程环境下的效率 问题(拓展) 例:反射破解单例模式 例:反序列化破解单例模式 总结:如何…

【PyCharm】常用快捷键

此篇文章内容会不定期更新,仅作为学习过程中的笔记记录 PyCharm的所有快捷键,其实均可以自定义,在位于Settings -> Keymap的目录下(如图),可以自行改写为自己熟悉的键位组合。 若更改为PyCharm已存在的键…

GESP等级考试 C++二级-if语句

if语句是C中的选择语句,通过if语句程序可以在一种可能、二种可能或者多种可能中做出选择,对于不同的可能进行不同的处理。 1 一种可能 使用if语句对一种可能进行处理的格式如下所示: if (表达式) {语句; } 其中,if后面跟一个圆…

虹科方案 | 精准零部件测试!多路汽车开关按键功能检测系统

欢迎关注虹科,为您提供最新资讯! #LIN/CAN总线 #零部件测试 #CAN数据 导读 在汽车制造业中,零部件的安全性、功能性和可靠性是确保车辆整体性能的关键。虹科针对车辆零部件的LIN/CAN总线仿真测试,提出了基于虹科Baby-LIN系列产…

基于单片机的人脸识别的智能门禁系统设计

文章目录 前言资料获取设计介绍功能介绍设计清单核心代码具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等…

【Redis入门到精通一】什么是Redis?

目录 Redis 1. Redis的背景知识 2.Redis特性 3.Redis的使用场景 4.Ubuntu上安装配置Redis Redis Redis在当今编程技术中的地位可以说非常重要,大多数互联网公司内部都在使用这个技术,熟练使用Redis已经成为开发人员的一个必备技能。本章将带领读者…

oracle select字段有子查询会每次执行子查询吗

Oracle在执行SELECT语句时,如果子查询被嵌套在主查询中,子查询会被执行多次,这是因为子查询的结果不会被缓存。每次主查询需要用到子查询的结果时,子查询都会被重新执行。这种行为可能会导致性能问题,特别是当子查询结…