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

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="">

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

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

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

相关文章

vue-引入使用main.js全局常量

common.js 命名什么都可以&#xff0c;用来定义常量的 定义了之后使用export让此暴露出去 const QRaddress http://localhost:9875export{QRaddress, } main.js //引入刚刚的js import {QRaddress} from /config/common.js挂载 Vue.prototype.$QRaddress QRaddress使用 …

Python---pyecharts地图案例

基础&#xff1a; # 可视化图表&#xff0c;导包&#xff08;地图&#xff09; from pyecharts.charts import Map from pyecharts.options import VisualMapOpts# 生成地图对象 map Map()# 准备数据--------------元组 data [("北京市", 99),("上海市"…

操作系统原理实验二:若干并发进程的进程调度程序

实验二&#xff1a;若干并发进程的进程调度程序 课程名称&#xff1a;操作系统原理 项目名称&#xff1a;若干并发进程的进程调度程序 实验&#xff08;实训&#xff09;类型&#xff1a;设计性实验 实验&#xff08;实训&#xff09;课时&#xff1a;2 [目的和要求] 目的&a…

小谈设计模式(15)—观察者模式

小谈设计模式&#xff08;15&#xff09;—观察者模式 专栏介绍专栏地址专栏介绍 观察者模式核心思想主要角色Subject&#xff08;被观察者&#xff09;ConcreteSubject&#xff08;具体被观察者&#xff09;Observer&#xff08;观察者&#xff09;ConcreteObserver&#xff0…

HTML的学习 Day02(列表、表格、表单)

文章目录 一、列表列表主要分为以下三种类型&#xff1a;1. 无序列表&#xff08;Unordered List&#xff09;&#xff1a;2. 有序列表&#xff08;Ordered List&#xff09;&#xff1a;将有序列表的数字改为字母或自定义内容li.../li 列表项标签中value属性&#xff0c;制定列…

【简单的留言墙】HTML+CSS+JavaScript

目标&#xff1a;做一个简单的留言墙 1.首先我们用HTML的一些标签&#xff0c;初步构造区域 样式。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>留言墙</title><style>/* ...... */ …

FFmpeg 命令:从入门到精通 | ffmpeg filter(过滤器 / 滤镜)

FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg filter&#xff08;过滤器 / 滤镜&#xff09; FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg filter&#xff08;过滤器 / 滤镜&#xff09;ffmpeg fliter 基本内置变量视频裁剪文字水印图片水印画中画视频多宫格处理 FFmpeg 命…

利用百分位点函数ppf计算置信区间上下限

百分位点函数&#xff08;Percent Point Function&#xff0c;PPF&#xff09;&#xff0c;也称为逆分布函数或分位数函数&#xff0c;是概率分布函数的逆运算。它的作用是根据给定的累积概率值&#xff0c;计算随机变量的值&#xff0c;使得该值以下的累积概率等于给定的概率。…

使用 cURL 发送 HTTP 请求: 深入探讨与示例

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

美丽的图论

**美丽的图论 ** Prf &#x1f609; 对于 n 个顶点上的树的数量 n^(n-2)&#xff0c;这是凯莱公式&#xff0c;用于计算 n 个顶点上的树的数量&#xff0c;被放置在一个由 4 个标记顶点组成的圆圈中。 使用 Figma 制作 在图论中&#xff0c;树只是一个没有环的图。 树在离散…

【MATLAB-基于直方图优化的图像去雾技术】

【MATLAB-基于直方图优化的图像去雾技术】 1 直方图均衡2 程序实现3 局部直方图处理 1 直方图均衡 直方图是图像的一种统计表达形式。对于一幅灰度图像来说&#xff0c;其灰度统计直方图可以反映该图像中不同灰度级出现的统计情况。一般而言&#xff0c;图像的视觉效果和其直方…

javaWeb学生信息管理

一、引言 学生信息管理系统是基于Java Web技术开发的一个全栈应用&#xff0c;用于管理学生的基本信息。本系统采用Eclipse作为开发工具&#xff0c;Navicat用于MySQL数据库管理&#xff0c;运行在JDK1.8、Tomcat9.0、MySQL8.0环境下。前端采用JavaScript、jQuery、Bootstrap4…

五款可替代163邮箱的电子邮件服务

在众多邮箱品牌中&#xff0c;163邮箱作为中国最早的邮箱服务提供商之一&#xff0c;其出海之路并不顺利。本文将探讨163邮箱出海的劣势&#xff0c;并介绍一些替代品&#xff0c;以帮助用户更好地选择适合自己的邮箱服务。 “163邮箱的替代品有哪些&#xff1f;外贸行业适合选…

Go_原子操作和锁

原子操作和锁 本文先探究并发问题&#xff0c;再探究锁和原子操作解决问题的方式&#xff0c;最后进行对比。 并发问题 首先&#xff0c;我们看一下程序 num该程序表面看上去一步就可以运行完成&#xff0c;但是实际上&#xff0c;在计算机中是分三步运行的&#xff0c;如下…

世界第一ERP厂商SAP,推出类ChatGPT产品—Joule

9月27日&#xff0c;世界排名第一ERP厂商SAP在官网宣布&#xff0c;推出生成式AI助手Joule&#xff0c;并将其集成在采购、供应链、销售、人力资源、营销、数据分析等产品矩阵中&#xff0c;帮助客户实现降本增效。 据悉&#xff0c;Joule是一款功能类似ChatGPT的产品&#xf…

国庆day2---select实现服务器并发

select.c&#xff1a; #include <myhead.h>#define ERR_MSG(msg) do{\fprintf(stderr,"__%d__:",__LINE__);\perror(msg);\ }while(0)#define IP "192.168.1.3" #define PORT 8888int main(int argc, const char *argv[]) {//创建报式套接字socketi…

S-Clustr(影子集群)僵尸网络@Мартин.

公告 项目地址:https://github.com/MartinxMax/S-Clustr/tree/V1.0.0 1.成功扩展3类嵌入式设备,组建庞大的"僵尸网络" |——C51[开发中] |——Arduino |——合宙AIR780e[开发中] 2.攻击者端与服务端之间通讯过程全程加密,防溯源分析 3.Generate一键自动生成Arduino…

【机器学习】熵和概率分布,图像生成中的量化评估IS与FID

详解机器学习中的熵、条件熵、相对熵、交叉熵 图像生成中常用的量化评估指标通常有Inception Score (IS)和Frchet Inception Distance (FID) Inception Score (IS) 与 Frchet Inception Distance (FID) GAN的量化评估方法——IS和FID&#xff0c;及其pytorch代码

Cheerleaders UVA - 11806

Cheerleaders - UVA 11806 - Virtual Judge 题目大意&#xff1a;有一个n*m的网格&#xff0c;要把其中k个格子涂黑&#xff0c;且满足最上、下一行、最左、右一列分别至少有一格黑&#xff0c;问方案数有多少 2<m,n<50&#xff1b;k<500 思路&#xff1a;因为合法…

hwk4:C++ 运算符重载

用mystring实在部分C运算符重载 mystring.h: #ifndef MYSTRING_H #define MYSTRING_H#include <iostream> #include <cstring>using namespace std;class myString { private:char *str; //记录c风格的字符串int size; //记录字符串的实际长…