vue3后台管理框架之svg封装为全局组件

因为项目很多模块需要使用图标,因此把它封装为全局组件!!!

在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后,页面上加载的不再是图片资源,

这对页面性能来说是个很大的提升,而且我们SVG文件比img要小的很多,放在项目中几乎不占用资源。

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {return {plugins: [vue(),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]'}),]}
}

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

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

相关文章

docker 安装(unbuntu安装)

替换源 有时候因为墙的原因,总是不成功,因此我们直接将apt源换成阿里云的 阿里云ubuntu镜像源 需要在阿里云找到指定版本的源,我这里是Ubuntu20 sudo vim /etc/apt/sources.list更换内容(可以先将sources.list备份) …

年龄越大,越要小心逢九年

老话有云:年龄逢九,灾祸频有。在我国的许多农村地区,至今还流传着这么句话,这句话的大概意思是说:每个人命理年龄逢九,就会有个坎,年龄越大,坎就越厉害,所以,…

【Linux】线程安全问题①——如何实现资源访问互斥(附图解与代码实现)

线程安全主要分为两个方面,分别是资源访问互斥与线程同步(线程协同配合) 本篇博客,我们主要来讲解资源访问互斥这一方面 目录 为什么要实现资源访问互斥? 实现资源访问互斥(原子访问)的经典…

Nginx正向代理配置(http)

前言 在工作中我们经常使用nginx进行反向代理,今天介绍下怎么进行正向代理,支持http请求,暂不支持https 首先先介绍下正向代理和反向代理。 正向代理 在客户端(浏览器)配置代理服务器,通过代理服务器进行互联网访问。 反向代理 客户端只…

修改RuoYi部署路径 适配nginx子路径访问

1 官方参考 若依官方文档提供了一种解决方式:前端手册 | RuoYi 若依文档给的已经很明白了,但如果子路径 /admin 发生改变,修改起来就感觉比较费事了,毕竟要修改4个文件。 这里咱们把子路径抽取出来,放到环境配置文件中…

ThinkPHP5小语种学习平台

有需要请加文章底部Q哦 可远程调试 ThinkPHP5小语种学习平台 一 介绍 此小语种学习平台基于ThinkPHP5框架开发,数据库mysql,前端bootstrap。平台角色分为学生,教师和管理员三种。学生注册登录后可观看学习视频,收藏视频&#xf…

关于图像分割SDK的一些基础认识

随着科技的不断发展,图像分割SDK已经成为了一个备受关注的话题。而在众多图像分割SDK中,美摄图像分割SDK以其独特的功能和优势脱颖而出。本文将从美摄图像分割SDK的企业价值和互联网娱乐方面,介绍其宣传文章的具体写作规范。 在企业价值方面&…

从一到无穷大 #18 时序数据库运营SLI思考

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作),由 李兆龙 确认,转载请注明版权。 公有云时序数据库SLA 运营商产品每服务周期服务可用率不低于99.9%衡量服务不可用数据指标从采…

Nginx 同一端口 同时支持http与https 协议

文章目录 需求分析 需求 通过 nginx ,让同一端口 同时支持http与https 协议 分析 通过使用 Nginx,可以实现同一端口同时支持 HTTP 和 HTTPS 协议。下面是一种可能的配置方式: 配置 HTTP 服务 在 Nginx 配置文件中,添加以下配置…

利用python学习如何处理需要登录的网站

要处理需要登录的网站,你可以按照以下步骤进行学习: 了解网站的登录机制:登录机制通常有用户名密码登录、OAuth授权登录、Cookie登录等。了解目标网站使用的登录机制是学习处理的第一步。 使用Web抓取工具模拟登录:通过使用工具如…

202、RabbitMQ 之 使用 fanout 类型的Exchange 实现 Pub-Sub 消息模型---fanout类型就是广播类型

目录 ★ 使用 fanout 类型的Exchange 实现 Pub-Sub 消息模型代码演示:生产者:producer消费者:Consumer01消费者:Consumer02测试结果 完整代码ConnectionUtilPublisherConsumer01Consumer02pom.xml ★ 使用 fanout 类型的Exchange …

[Swift]同一个工程管理多个Target

1.准备 先创建一个测试工程“ADemo”,右键其Target选择Duplicate,再复制一个Target为“ADemo2”。 再选择TARGETS下方的“”,添加一个APP到项目中,这个命名为“BDemo”。 2、管理多个Target 可以对三个target分别导入不同的框…

iWall:支持自定义的Mac动态壁纸软件

iWall Mac是一款动态壁纸软件,它可以使用任何格式的漂亮视频(无须转换)、图片、动画、Flash、gif、swf、程序、网页、网站做为您的动态壁纸、动态桌面,并且可以进行交互。 这款软件功能多、使用简单、体积小巧、不占用资源、运行…

Go 1.21 新内置函数:min、max 和 clear

max 函数 func max[T cmp.Ordered](x T, y …T) T 这是一个泛型函数,用于从一组值中寻找并返回 最大值,该函数至少要传递一个参数。在上述函数签名中,T 表示类型参数,它必须满足 cmp.Ordered 接口中定义的数据类型要求&#xff0…

多个方向工程师岗位缺人,最高25K/月!

高级存储工程师 岗位职责: 1.负责存储设备的巡检,及时解决设备故障; 2.负责定期对存储设备的运行基本状态进行健康性检查和保养等预防性维护服务; 3.负责提供SAN、NAS、iSCSI等存储设备的实时监控; 4.负责提供存储设备…

微信小程序引入阿里巴巴iconfont图标并使用

介绍 在小程序里,使用阿里巴巴的图标,如下所示: 使用方式 搜索自己需要的图标,然后将需要用到的图标加入购物车,如下图所示: 去右上角,点击购物车按钮;这里第一次使用,会有三个提…

Redis缓存穿透、缓存击穿、缓存雪崩详解

目录 缓存处理流程 一、缓存穿透 1、概念 2、解决办法 二、缓存击穿 1、概念 2、解决办法 三、缓存雪崩 1、概念 2、解决办法 缓存处理流程 接收到查询数据请求时,优先从缓存中查询,若缓存中有数据,则直接返回,若缓存中查不到则从…

再学Blazor——概述

简介 Blazor 是一种 .NET 前端 Web 框架,同时支持服务器端呈现和客户端交互性。 使用 C# 语言创建丰富的交互式 UI共享前后端应用逻辑可以生成混合桌面和移动应用受益于 .NET 的性能、可靠性和安全性需要有 HTML、CSS、JS 相关基础(开发 UI 框架的话&a…

Steam余额红锁的原因,及红锁后申诉办法

安全的余额一般是通过充值卡充值获得,再加上交易手续费再转卖给你。一般便宜不到哪去。 但你别以为余额是安全的,就万事大吉了。照样有被红锁的可能性,比如这三种: 1、Steam市场巡查机制,红锁 平台的巡查机制和原理…

在逍遥模拟器上安装LPSosed模块以及其Manager管理器

环境:win7 64位,python3.8.10,逍遥模拟器9.0.6,安卓版本9 参考我的文章: 在雷电模拟器9上安装magisk并安装LSPosed模块以及其Manager管理器(一)-CSDN博客 前置工作:先开启模拟器的…