vue3 动态 svg 图标使用

news2024/11/15 13:21:42

前言 

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

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

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

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

vite项目中

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2134192.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

逆向学习系列(三)adb的使用

由于是记录学习,我就用结合自己的理解,用最通俗的语言进行讲解。 adb是android debug bridge的简写,其作用就是将电脑和手机相连接,用电脑控制手机。 一、adb哪里来 我使用的adb一般都是安装模拟器的时候,模拟器自带…

动不动就下跪的三星,离开天津了

关注卢松松,会经常给你分享一些我的经验和观点。 三星辉煌岁月已过,万事凋零!如果说IBM、惠普、戴尔、苹果、富士康的离开有点惋惜的话,那三星的离开就是“活该”了。 成立于1993年的天津三星电子有限公司与2024年9月6日注销了&#xff0…

TCP交互通讯在Windows中的频率

在基于TCP协议的交互式通讯中,通过网口进行数据传输时,Windows系统的通讯频率通常受到多方面的限制,很难稳定达到几千Hz。以下是关于频率范围的合理分析及提高频率的措施。 频率限制的原因: 网络延迟:TCP通讯的一个核心…

内幕!smardaten无代码平台全方位测评,这些细节你绝对想不到!

目录 一、引言二、测评要点2.1、前后端交互嵌套2.2、兼容性与可扩展性2.2.1、页面集成2.2.2、数据集成2.2.3、接口集成2.2.4、权限集成2.2.5、代码扩展支持 2.3、UI定制2.4、开发环境的隔离2.5、OEM定制2.6、多语言切换2.7、AI大模型能力 三、总结 一、引言 作为一枚IT从业者&…

了解计算机安全性【技术、管理与法律】

‍ 在当今数字化时代,计算机安全性 已成为每个计算机用户必须关注的重要课题。无论是在个人计算机、企业系统,还是政府机构,保障计算机系统的安全性都是不可忽视的责任。那么,什么是计算机安全性?它又包括哪些方面呢&…

django学习入门系列之第十点《A 案例: 员工管理系统7》

文章目录 9 初识Form9.1 views.py9.2 add.html 10 初识ModelForm10.1 models.py10.2 views.py10.3 add.html10.4 添加类10.5 重写对象 往期回顾 9 初识Form 9.1 views.py 在html的文件中,如写input组件那种会写的非常繁琐,所以会用form的一个功能来进行…

JEE 设计模式

Java 数据访问对象模式 Java设计模式 - 数据访问对象模式 数据访问对象模式或DAO模式将数据访问API与高级业务服务分离。 DAO模式通常具有以下接口和类。 数据访问对象接口定义模型对象的标准操作。 数据访问对象类实现以上接口。可能有多个实现,例如&#xff0c…

java重点学习-线程池

十 线程池 10.1 说一下线程池的核心参数,线程池的执行原理 为什么使用线程池 创建线程占用内存空间,每次创建的话会浪费内存cpu有限,大量线程会导致cpu切换 10.2 线程池中有哪些常见的阻塞队列 workQueue-当没有空闲核心线程时,新…

[产品管理-14]:NPDP新产品开发 - 12 - 产品创新流程 - 创新章程与通用流程

目录 前言: 一、什 么 是 产 品 创 新 流 程 ? 1.1 概述 1.2 管 理 创 新 产 品 失 败 的 2个风 险 : 不 确 定 性 和 成 本 1、不确定性风险 2、成本风险 1.3 重点关注创新产品的起点的正确性:正确的事 二、产品创造章程…

Day10-作业讲解,Ingress规则编写及Jenkins集成K8S项目实战案例

Day10-作业讲解,Ingress规则编写及Jenkins集成K8S项目实战案例 1、作业:1.1 作业分析:1.2 复刻镜像1.3 将游戏镜像上K8S集群1.4 helm部署服务1.5 ingress规则编写 2、项目1-jenkins和k8s集成2.1 Jenkins实现k8s持续集成项目流程图解2.2 Jenkins集成K8S-将代码推送到…

Cmake之3.27版本重要特性及用法实例(二十二)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【…

解锁NXP i.MX93 DDR精准校正,极限压力测试

在前一篇关于NXP i.MX93开板流程的文章中,我们已经详细说明了目标板(Target Board)在打件完成后需要注意的事项。接下来的步骤是进行DRAM的时序校正及压力测试。 在i.MX8及之前的系列中, DDR压力测试是使用DDR Stress Test Tool&…

Python绘制论文图

Python Graph Gallery Python Boxplot Gallery | Dozens of examples with code

记录一下,Vcenter清理/storage/archive空间

一、根因 vpostgres:这个目录可能包含与 vCenter Server 使用的 PostgreSQL 数据库相关的归档文件过多,导致空间被占用。 二、处理过程 1、SSH登陆到Vcenter. 2、df -Th **图中可以看到 /storage/archive 使用占比很高。 /storage/archive 目录通常用…

光耦选型 | 光伏逆变器使用光耦型号推荐——KL101X系列

光伏逆变器是太阳能光伏发电系统中的关键设备之一,主要用于将光伏电池板产生的直流电转换为交流电,以供电网使用或者直接驱动交流电负载。在光伏逆变器中,光耦扮演着重要的角色,主要应用在以下几个方面: 隔离保护&…

前端基本功——面试必问系列(1):都2024了,还没吃透Promise?一文搞懂

写在前面: 大家好,我是山里看瓜,该系列文章是为了帮助大家不管面试还是开发对前端的一些基本但是很重要的知识点认识更加深入和全面。 想写这个系列文章的初衷是:我发现前端的很多基本知识,使用起来很简单&#xff0…

等保测评后:企业如何持续优化信息安全

通过信息安全等级保护(等保)测评,标志着企业达到了国家规定的安全标准,但这并非终点。在等保测评后,企业需要持续优化信息安全,保持和提升信息安全的防护水平,确保业务的稳定运行和数据的安全。…

一文搞定裸纤、以太网、SDH、MSTP、PTN、波分、OTN的区别!!!

目录 一、前奏 二、SDH 三、MSTP 四、波分 五、OTN 六、以太网 七、PTN 八、裸纤 一、前奏 SDH、WDM、OTN、Ethernet等到底有啥区别,接下来会按照自己的思路梳理一遍。 在介绍之前我觉得有几个点是需要记在脑海里带着这些词条去阅读的,列举如下…

【图像识别】摄像头捕捉运动到静止视频帧(免费源码分享)

【图像识别】摄像头捕捉运动到静止视频帧(免费源码分享) 1. 本文摘要 本文实现了一个OpenCV和PyQT5 结合的摄像头视频捕捉和运动检测线程,实现了一款界面软件用于功能演示。主要使用帧差法实现,摄像头捕捉运动到静止的图片,捕捉到的图片可用…