VUE3 加载自定义SVG文件

网上代码通篇一律,需要修改多处地方,特别是component下还要创建一个index.vue的组件,奇奇怪怪。

要在 Vue 项目中使用 svg-sprite-loader 来管理 SVG 图标,你需要执行以下几个步骤:

npm install svg-sprite-loader -D 

步骤 1: 配置 vue.config.js

确保你的 Vue 项目的根目录中有一个 vue.config.js 文件,用于自定义 Vue CLI 的内部 webpack 配置。如果文件不存在,你可以创建一个。在这个文件中,添加以下配置:

const path = require('path');module.exports = {chainWebpack: config => {// SVG 规则排除 icons 目录config.module.rule('svg').exclude.add(path.resolve('src/assets/icons'))// 添加 icons 目录的 SVG loaderconfig.module.rule('icons').test(/\.svg$/).include.add(path.resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({ symbolId: 'icon-[name]' })}
};

这个配置告诉 webpack 对于 src/assets/icons 目录中的 .svg 文件,使用 svg-sprite-loader 来处理它们。其他目录中的 .svg 文件将使用项目中默认的 SVG loader。

步骤 2: 添加 SVG 图标

将你的 SVG 图标放置在 src/assets/icons 目录中。例如,你可以有一个名为 example.svg 的图标。

一个简单的 SVG 图标可能看起来像这样:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

步骤 3: 全局引入 SVG 图标

在项目的入口文件(通常是main.jsmain.ts)中添加全局 SVG 导入。例如:

import { createApp } from 'vue';
import App from './App.vue';// 导入 SVG 图标
const req = require.context('./assets/icons', false, /\.svg$/);
const requireAll = context => context.keys().map(context);
requireAll(req);createApp(App).mount('#app');

步骤 4: 使用 SVG 图标

在你的组件中,你应该能够通过 symbolId 引用 SVG 图标,就像这样:

<template><svg class="icon" aria-hidden="true"><use xlink:href="#icon-example"></use></svg>
</template>

其中 icon-example 是你的 SVG 文件名。

步骤 5: 重新编译

现在,你可以在任何组件中使用这些 SVG 图标。图标的 ID 将基于文件名,例如 icon-example 对应于 example.svg 文件。

请注意,这些步骤假设你的 Vue 项目是基于 Vue CLI 创建的。如果你的项目结构有所不同,可能需要相应地调整配置和路径。

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

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

相关文章

报告发布 | 聚铭网络参编的《数据安全风险评估实务:问题剖析与解决思路》正式发布

近日&#xff0c;由中国信通院、中国通信标准化协会主办&#xff0c;中国通信标准化协会大数据技术标准推进委员会承办的“数据资产管理大会数据安全论坛”在北京成功召开。会上正式发布了《数据安全风险评估实务&#xff1a;问题剖析与解决思路》报告&#xff08;以下简称“报…

事务、MVCC、锁

目录 事务MVCC锁 事务 四大特性&#xff1a;ACID 脏读&#xff1a;事务A读取到未提交事务B修改的数据 不可重复读&#xff1a;事务A修改了未提交事务B读取的数据 幻读&#xff1a;事务A增删了未提交事务B读取的数据 不可重复读与幻读都是读取的结果不同&#xff0c;前者侧重于…

AI 平台汇总

chatexcel https://chatexcel.com/convert chatlaw https://www.chatlaw.cloud/

什么是零知识证明?

Web3 的核心原则之一——透明度&#xff0c;也可能是其最大的缺点之一。没有人希望他们的所有在线活动&#xff08;从金融交易到个人身份数据&#xff09;都可供任何人公开查看。为了使区块链能够扩展并变得更容易访问&#xff0c;隐私必须成为首要任务。 零知识证明能够改变我…

一些著名的软件都用什么语言编写?

1、操作系统 Microsoft Windows &#xff1a;汇编 -> C -> C 备注&#xff1a;曾经在智能手机的操作系统&#xff08;Windows Mobile&#xff09;考虑掺点C#写的程序&#xff0c;比如软键盘&#xff0c;结果因为写出来的程序太慢&#xff0c;实在无法和别的模块合并&…

2001-2022年全国30省就业人数数据

2001-2022年全国30省就业人数数据 1、时间&#xff1a;2001-2022年 2、来源&#xff1a;各省年鉴、人口和就业年鉴、wind 3、指标&#xff1a;省份、年份、就业人数 4、范围&#xff1a;30个省市 5、缺失情况&#xff1a;无缺失 6、指标解释&#xff1a; 就业人口是指一…

[嵌入式软件][入门篇][仿真平台] STM32CubeMX的搭建

文章目录 一、简介二、STM32CubeMX的使用(1) 新建文件&#xff0c;芯片选型(2) sys设置和RCC设置(3) 配置时钟(4) 生成代码 三、仿真平台的使用 一、简介 STM32CubeMX是一种图形工具&#xff0c;通过分步过程可以非常轻松地配置STM32微控制器和微处理器&#xff0c;生成相应的初…

保护医疗数据不受威胁:MPLS专线在医疗网络安全中的角色

随着数字技术的快速发展&#xff0c;医疗行业正在经历一场革命。从电子健康记录到远程医疗服务&#xff0c;数字化不仅提高了效率&#xff0c;也带来了前所未有的挑战--尤其是关于数据安全和隐私保护的挑战。在这样的背景下&#xff0c;如何确保敏感的医疗数据安全传输&#xf…

第一口就喝到了珠珠

x*ay*bc;假设b杯比a杯大&#xff0c;那么就是往b中可以加入a杯&#xff0c;然后倒出b杯&#xff0c;就是求x和y的最大公因数&#xff0c;用cn1*k*xn2*k*ygcd(a,b)*(n1*xn2*y);而且c要小于a或者b的最大值. int gcd(int a, int b) {while (b) {int t b;b a % b;a t;}return s…

腾讯云Linux(OpenCloudOS)安装tomcat9(9.0.85)

腾讯云Linux(OpenCloudOS)安装tomcat9 下载并上传 tomcat官网 https://tomcat.apache.org/download-90.cgi 下载完成后上传至自己想要放置的目录下 解压文件 输入tar -xzvf apache-tomcat-9.0.85.tar.gz解压文件&#xff0c;建议将解压后的文件重新命名为tomcat,方便后期进…

logstash的使用

背景&#xff1a;想要通过logstash将以txt结尾的文件数据导入到es中&#xff0c;这种TXT文件每天都会生成&#xff0c;然后将增量的TXT文件加载到es中&#xff0c;之前没用过&#xff0c;做个记录 ES中的表结构如下 {"user_name" : {"aliases" : { },&qu…

大模型学习与实践笔记(十四)

使用 OpenCompass 评测 InternLM2-Chat-7B 模型使用 LMDeploy 0.2.0 部署后在 C-Eval 数据集上的性能 步骤1&#xff1a;下载internLM2-Chat-7B 模型,并进行挂载 以下命令将internlm2-7b模型挂载到当前目录下&#xff1a; ln -s /share/model_repos/internlm2-7b/ ./ 步骤2&…

git Filename too long

git Filename too long 原因&#xff1a; 文件名限制260长度 解决&#xff1a;全局配置git git config --system core.longpaths true查看&#xff1a; git config --get core.longpaths

音频分离软件有哪些?这些软件轻松分离

音频分离软件有哪些&#xff1f;随着音频处理需求的日益增长&#xff0c;音频分离软件成为了许多人的必备工具。为了满足这些需求&#xff0c;市面上涌现出了许多优秀的音频分离软件。本文将为您介绍5款知名的音频分离软件&#xff0c;让您轻松实现音频处理。 1.口袋视频转换器…

SQL盲注漏洞

在进行SQL注入攻击时&#xff0c;若确定有注入点但因页面没有回显位来显示数据&#xff0c; 导致无法获取有效信息时&#xff0c;就要进行SQL盲注。 5.3.1 简介 目前常用的SQL盲注主要分以下两类&#xff1a; 基于布尔的盲注&#xff1a;当页面没有回显位、不会输出SQL语句报…

股票是什么

一、证券是什么 有价证券&#xff0c;简称证券&#xff0c;是一种表示财产权的有价凭证&#xff0c;持有者可以依据此凭证&#xff0c;证明其所有权或债权等私权。例如&#xff1a;股票、债券等。 二、股票概念 &#xff08;一&#xff09;股票是什么&#xff1f; 股票是一种…

前端网站website

​1. 翻页组件 翻页参考网址 中国电影电视技术学会 插件地址 http://www.turnjs.com/ 2.人机验证组件 vue-puzzle-vcode https://gitee.com/beeworkshop/vue-puzzle-vcode?_fromgitee_search 3.图片剪裁 图片裁剪 官网&#xff1a;https://github.xyxiao.cn/vue-cropper/ …

Linux ---- Shell编程之正则表达式

一、正则表达式 ​ 由一类特殊字符及文本字符所编写的模式&#xff0c;其中有些字符&#xff08;元字符&#xff09;不表示字符字面意义&#xff0c;而表示控制或通配的功能&#xff0c;类似于增强版的通配符功能&#xff0c;但与通配符不同&#xff0c;通配符功能是用…

Boost.Test-如何将测试套件(源码文件)组织成工程、并执行测试

Boost.Test资源及示例的续篇 1.测试套件TestSuite的源码文件组织如下图 2.CMakeLists.txt需要自己编写&#xff0c;本例内容如下 cmake_minimum_required(VERSION 3.5.0 FATAL_ERROR) project(mytestmodule) enable_testing()# indicates the location of the boost instal…

OAK深度相机主机时钟同步提升10倍!

编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查看首发地址链接。 ▌前言 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是Ash…