当前位置： 首页 > news >正文

在vue3中使用vite-svg-loader插件

news 文章来源：https://blog.csdn.net/Anyuegogogo/article/details/133524198 2025/1/11 10:15:01

vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。

安装

npm install vite-svg-loader --save-dev

使用

import svgLoader from 'vite-svg-loader'export default defineConfig({plugins: [vue(), svgLoader()]
})

组件里使用

在路径后加?component，表示像组件一样使用。

import Icon404 from '@/assets/icons/svg/404.svg?component';
<Icon404></Icon404>

在路径后加?url，可以做为图片url引入

import Icon404 from '@/assets/icons/svg/404.svg?url';
<img :src="Icon404" alt="">

参考链接：参考链接
官方文档：链接

相关文章：

在vue3中使用vite-svg-loader插件

vite-svg-loader插件可以让我们像使用vue组件那样使用svg图&#xff0c;使用起来超级方便。 安装 npm install vite-svg-loader --save-dev使用 import svgLoader from vite-svg-loaderexport default defineConfig({plugins: [vue(), svgLoader()] })组件里使用 在路径后加…...

编程日记 2023/10/4 23:49:47

国庆10.4

QT实现TCP服务器客户端 服务器 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务器头文件 #include <QTcpSocket> //客户端头文件 #include <QList> //链表容器 #include <QMe…...

编程日记 2023/10/4 23:48:46

2023/8/12 下午8:41:46 树状控件guilite

2023/8/12 下午8:41:46 树状控件guilite 2023/8/12 下午8:42:08 树状控件（Tree View）是一种常见的图形用户界面（GUI）元素，它通常用于显示层次结构数据或文件系统的目录结构。Guilite 是一个轻量级的跨平台 GUI 库，支持多种控件，包括树状控件。 在 Guilite 中使用树状…...

编程日记 2023/10/4 23:45:43

BL808学习日志-2-LVGL for M0 and D0

一、lvgl测试环境 对拿到的M1S_DOCK开发板进行开发板测试&#xff0c;博流的官方SDK是支持M0和D0两个内核都进行测试的&#xff1b;但是目前只实现了M0的LVGLBenchmark&#xff0c;测试D0内核中发现很多莫名其妙的问题。一会详细记录。 使用的是开发板自带的SPI显示屏&#xff…...

编程日记 2023/10/4 23:44:42

treectrl类封装 2023/8/13 下午4:07:35

2023/8/13 下午4:07:35 treectrl类封装 2023/8/13 下午4:07:53 TreeCtrl 类是一个常用的图形用户界面控件，用于实现树形结构的展示和交互。以下是一个简单的 TreeCtrl 类的封装示例： python import wxclass MyTreeCtrl(wx.TreeCtrl):def __init__(self, parent):super()…...

编程日记 2023/10/4 23:42:38

Android学习之路(20) 进程间通信

IPC IPC为 (Inter-Process Communication) 缩写&#xff0c;称为进程间通信或跨进程通信&#xff0c;指两个进程间进行数据交换的过程。安卓中主要采用 Binder 进行进程间通信&#xff0c;当然也支持其他 IPC 方式&#xff0c;如&#xff1a;管道&#xff0c;Socket&#xff0…...

编程日记 2023/10/4 23:41:38

机器学习——KNN算法流程详解（以iris为例）

、 目 录 前情说明 问题陈述 数据说明 KNN算法流程概述 代码实现 运行结果 基于可视化的改进 可视化代码 全部数据可视化总览 分类投票结果 改进后最终代码 前情说明 本书基于《特征工程入门与入门与实践》庄家盛 译版P53页K最近邻&#xff08;KNN&#xff09;算…...

编程日记 2023/10/4 23:40:36

国庆假期day5

作业&#xff1a;请写出七层模型及每一层的功能&#xff0c;请绘制三次握手四次挥手的流程图 1.OSI七层模型&#xff1a; 应用层--------提供函 表示层--------表密缩 会话层--------会话 传输层--------进程的接收和发送 网络层--------寻主机 数据链路层----相邻节点的可靠传…...

编程日记 2023/10/4 23:39:34

ES6中的let、const

let ES6中新增了let命令&#xff0c;用来声明变量&#xff0c;和var类似但是也有一定的区别 1. 块级作用域 只能在当前作用域内使用&#xff0c;各个作用域不能互相使用&#xff0c;否则会报错。 {let a 1;var b 1; } console.log(a); // 会报错 console.log(b); // 1为什…...

编程日记 2023/10/4 23:38:32

Python 列表操作指南3

示例&#xff0c;将新列表中的所有值设置为 ‘hello’&#xff1a; newlist [hello for x in fruits]表达式还可以包含条件&#xff0c;不像筛选器那样&#xff0c;而是作为操纵结果的一种方式&#xff1a; 示例&#xff0c;返回 “orange” 而不是 “banana”&#xff1a; …...

编程日记 2023/10/4 23:37:31

三个要点，掌握Spring Boot单元测试

单元测试是软件开发中不可或缺的重要环节&#xff0c;它用于验证软件中最小可测试单元的准确性。结合运用Spring Boot、JUnit、Mockito和分层架构&#xff0c;开发人员可以更便捷地编写可靠、可测试且高质量的单元测试代码&#xff0c;确保软件的正确性和质量。 一、介绍 本文…...

编程日记 2023/10/4 23:36:30

【nginx】Nginx配置：

文章目录 一、什么是Nginx&#xff1a;二、为什么使用Nginx&#xff1a;三、如何处理请求&#xff1a;四、什么是正向代理和反向代理&#xff1a;五、nginx 启动和关闭&#xff1a;六、目录结构&#xff1a;七、配置文件nginx.conf&#xff1a;八、location&#xff1a;九、单页…...

编程日记 2023/10/4 23:35:29

CSS3与HTML5

box-sizing content-box&#xff1a;默认&#xff0c;宽高包不含边框和内边距 border-box&#xff1a;也叫怪异盒子&#xff0c;宽高包含边框和内边距 动画&#xff1a;移动translate&#xff0c;旋转、transform等等 走马灯&#xff1a;利用动画实现animation&#xff1a;from…...

编程日记 2023/10/4 23:33:25

redis的简单使用

文章目录 环境安装与配置redis发布-订阅相关命令redis发布-订阅的客户端编程redis的订阅发布的例子 环境安装与配置 sudo apt-get install redis-server # ubuntu命令安装redis服务ubuntu通过上面命令安装完redis&#xff0c;会自动启动redis服务&#xff0c;通过ps命令确认&a…...

编程日记 2023/10/4 23:25:16

Windows下启动freeRDP并自适应远端桌面大小

几个二进制文件 xfreerdp # Linux下的&#xff0c;an X11 Remote Desktop Protocol (RDP) client which is part of the FreeRDP project wfreerdp.exe # Windows下的&#xff0c;freerdp2.0 主程序&#xff0c;freerdp3.0将废弃 sdl-freerdp.exe # Windows下的&…...

编程日记 2023/10/4 23:23:14

ES6中的数值扩展

1. 二进制和八进制的表示法 二进制和八进制的前缀分别为0b(或0B)和0o(或0O)表示 在ES5的严格模式下&#xff0c;八进制不再允许使用前缀0表示 如果要将0b和0x前缀的字符串数值转为十进制&#xff0c;要使用Number方法 Number(0b111); // 7 Number(0o10); // 82. Number.isF…...

编程日记 2023/10/4 23:22:12

自定义注解实现Redis分布式锁、手动控制事务和根据异常名字或内容限流的三合一的功能

自定义注解实现Redis分布式锁、手动控制事务和根据异常名字或内容限流的三合一的功能 文章目录 [toc] 1.依赖2.Redisson配置2.1单机模式配置2.2主从模式2.3集群模式2.4哨兵模式 3.实现3.1 RedisConfig3.2 自定义注解IdempotentManualCtrlTransLimiterAnno3.3自定义切面Idempote…...

编程日记 2023/10/4 23:19:08

Linux：minishell

目录 1.实现逻辑 2.代码及效果展示 1.打印字符串提示用户输入指令 2.父进程拆解指令 3.子进程执行指令,父进程等待结果 4.效果 3.实现过程中遇到的问题 1.打印字符串的时候不显示 2.多换了一行 3.cd路径无效 4.优化 1.ll指令 2.给文件或目录加上颜色 代码链接 模…...

编程日记 2023/10/4 23:18:07

STM32驱动步进电机

前言 &#xff08;1&#xff09;本章介绍用stm32驱动42步进电机&#xff0c;将介绍需要准备的硬件器材、所需芯片资源以及怎么编程及源代码等等。 &#xff08;2&#xff09;实验效果&#xff1a;按下按键&#xff0c;步进电机顺时针或逆时针旋转90度。 &#xff08;3&#xff…...

编程日记 2023/10/4 23:17:06

计算机视觉——飞桨深度学习实战-深度学习网络模型

深度学习网络模型的整体架构主要数据集、模型组网以及学习优化过程三部分&#xff0c;本章主要围绕着深度学习网络模型的算法架构、常见模型展开了详细介绍&#xff0c;从经典的深度学习网络模型以CNN、RNN为代表&#xff0c;到为了解决显存不足、实时性不够等问题的轻量化网络…...

编程日记 2023/10/4 23:16:05

用c动态数组(不用c++vector)实现手撸神经网咯230901

用c语言动态数组(不用c++的vector)实现:输入数据inputs = { {1, 1}, {0,0},{1, 0},{0,1} };目标数据targets={0,0,1,1}; 测试数据 inputs22 = { {1, 0}, {1,1},{0,1} }; 构建神经网络，例如：NeuralNetwork nn({ 2, 4,3,1 }); 则网络有四层、输入层2个nodes、输出层1个节点、第…...

编程日记 2023/10/4 23:14:03

视频讲解|基于DistFlow潮流的配电网故障重构代码

目录 1 主要内容 2 视频链接 1 主要内容 该视频为基于DistFlow潮流的配电网故障重构代码讲解内容&#xff0c;对应的资源下载链接为基于DistFlow潮流的配电网故障重构(输入任意线路)&#xff0c;对该程序进行了详尽的讲解&#xff0c;基本做到句句分析和讲解&#xff08;讲解…...

编程日记 2023/10/4 23:09:57

Ultralytics（YoloV8）开发环境配置，训练，模型转换，部署全流程测试记录

关键词&#xff1a;windows docker tensorRT Ultralytics YoloV8 配置开发环境的方法&#xff1a; 1.Windows的虚拟机上配置&#xff1a; Python3.10 使用Ultralytics 可以得到pt onnx&#xff0c;但无法转为engine&#xff0c;找不到GPU&#xff0c;手动转也不行&#xff0…...

编程日记 2023/10/4 23:08:55

springboot之@ImportResource:导入Spring配置文件~

ImportResource的作用是允许在Spring配置文件中导入其他的配置文件。通过使用ImportResource注解&#xff0c;可以将其他配置文件中定义的Bean定义导入到当前的配置文件中&#xff0c;从而实现配置文件的模块化和复用。这样可以方便地将不同的配置文件进行组合&#xff0c;提高…...

编程日记 2023/10/4 23:07:54

阿里云服务器免费申请入口_注册阿里云免费领4台服务器

注册阿里云账号&#xff0c;免费领云服务器&#xff0c;最高领取4台云服务器&#xff0c;每月750小时&#xff0c;3个月免费试用时长&#xff0c;可快速搭建网站/小程序&#xff0c;部署开发环境&#xff0c;开发多种企业应用。阿里云百科分享阿里云服务器免费领取入口、免费云…...

编程日记 2023/10/4 23:05:51

ES6中的async、await函数

async是为了解决异步操作&#xff0c;其实是一个语法糖&#xff0c;使代码书写更加简洁。 1. async介绍 async放在一个函数的前面&#xff0c;await则放在异步操作前面。async代表这个函数中有异步操作需要等待结果&#xff0c;在一个async函数中可以存在多个await&#xff0…...

编程日记 2023/10/4 22:57:40

代码随想录算法训练营第五十六天 | 动态规划 part 14 | 1143.最长公共子序列、1035.不相交的线、53. 最大子序和（dp）

目录 1143.最长公共子序列思路代码 1035.不相交的线思路代码 53. 最大子序和&#xff08;dp&#xff09;思路代码 1143.最长公共子序列 Leetcode 思路 本题和718. 最长重复子数组 区别在于这里不要求是连续的了&#xff0c;但要有相对顺序&#xff0c;即&#xff1a;“ace” …...

编程日记 2023/10/4 22:56:39

【数据挖掘】2021年 Quiz 1-3 整理 带答案

目录 Quiz 1Quiz 2Quiz 3Quiz 1 Problem 1 (30%). Consider the training data shown below. Here, A A A and B B B</...

编程日记 2023/10/4 22:55:38

【软件设计师-中级——刷题记录6（纯干货）】

目录 管道——过滤器软件体系结构风格优点&#xff1a;计算机英语重点词汇&#xff1a;单元测试主要检查模块的以下5个特征&#xff1a;数据库之并发控制中的事务&#xff1a;并发产生的问题解决方案:封锁协议原型化开发方法&#xff1a; 每日一言&#xff1a;持续更新中... 个…...

编程日记 2023/10/4 22:54:36

微信小程序点单左右联动的效果实现

微信小程序点单左右联动的效果实现 原理解析&#xff1a;   点击左边标签会跳到右边相应位置&#xff1a;点击改变rightCur值&#xff0c;转跳相应位置滑动右边&#xff0c;左边标签会跳到相应的位置&#xff1a;监听并且设置每个右边元素的top和bottom&#xff0c;再判断当…...

编程日记 2023/10/4 22:53:34

海南建设局相关网站/百度宣传推广

简介LinuxApacheMySQL/MariaDBPHP(简称LAMP)&#xff0c;是一组常用来搭建动态网站或者服务器的开源软件。部署及环境&#xff1a;系统平台&#xff1a;CentOS 7.2Apache版本&#xff1a;2.4.23Mysql 版本&#xff1a;5.7.17PhP版本&#xff1a;7.0.12安装前准备&#xff1a;Ce…...

编程日记 2025/1/11 9:06:39

.net做网站实例 贴吧/东莞寮步最新通知

1.js的数据类型 js的数据类型分为基本数据类型&#xff08;String,Number, Boolean,Null,Undefined,Symbol&#xff09;和引用数据类型(Array, Object)。 特点&#xff1a; 基本数据类型&#xff1a;直接存储在栈(stack)中引用数据类型&#xff1a;存储的是该对象在栈中引用&…...

编程日记 2025/1/11 5:52:27

芜湖网站建设推广/网络推广网站有哪些

有序数组的 Two Sum两数平方和反转字符串中的元音字符回文字符串归并两个有序数组判断链表是否存在环最长子序列 双指针主要用于遍历数组&#xff0c;两个指针指向不同的元素&#xff0c;从而协同完成任务。 有序数组的 Two Sum Leetcode &#xff1a;167. Two Sum II - Inpu…...

编程日记 2025/1/10 22:08:33

高大上的自助建站网站/tool站长工具

目录一、本地运行模式1. 主要项目结构&#xff1a;2. 配置pom.xml引入需要的jar包3. Map过程4. Reduce过程5. 核心类Driver&#xff1a;二、集群运行模式&#xff1a;1. 打包项目为jar包2. 上传打包的项目jar包到data目录下3. 运行项目jar包一、本地运行模式 1. 主要项目结构&…...

编程日记 2025/1/10 17:24:32

wordpress商品列表对比插件/舆情监测系统排名

过滤器 在vue2.x中允许自定义过滤器&#xff0c;可被用于一些常见的文本格式化。过滤器可以用在两个地方&#xff1a;双花括号插值和 v-bind 表达式 (后者从 2.1.0 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部&#xff0c;由“管道”符号指示&#xff1a; <!-…...

编程日记 2025/1/10 16:31:57

app网站建设 - 百度/站内搜索工具

首先找根网线把路由器连接到ADSL猫的WAN口上&#xff0c;然后再用根网线把路由器连接到电脑上 &#xff0c;确保连接成功后&#xff0c;打开你电脑的IE浏览器&#xff0c;然后输入你路由器面的ip地址&#xff0c;一般情况都是192.168.1.1&#xff0c;然后回车会弹出输入用户名和…...

编程日记 2025/1/10 15:45:36