vue全局使用svg
1、安装依赖
npm install svg-sprite-loader
2、配置选项
在vue.config.js的chainWebpack里配置下面代码
解释:config.module.rule是一个方法,用来获取某个对象的规则。.exclude.add(文件a)是往禁用组添加文件a,就是对文件a进行禁用。.test(/.svg$/)是匹配到.svg结尾的文件
config.module.rule('svg').exclude.add(resolve('src/icons')) //对应下面配置svg的路径.end();config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')) //对应下面配置svg的路径.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'});
3、定义组件
把svg封装成组件,我们就可以以组件的形式调用svg图片。在components下面写组件。

componnets/svgIcon/index.vue:
<template><svg :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName"/></svg>
</template><script>export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}}
</script><style scoped>.svg-icon {width: 10em;height: 10em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
4、存储图片,全局注册
创建文件目录,放置svg图片
我把svg图片放在src/icons/svg文件夹下,然后再将svgIcon注册为全局组件

src/icons/index.js:
import Vue from 'vue'
import SvgIcon from '@/components/svgIcon/index'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
5、全局引入
在mian.js中引入注册文件
import './icons'
6、使用
例如有一张图片rain.svg,路径是icons/svg/rain.svg,然后直接用名称就可以调用。这里的className是自定义样式
//<svg-icon icon-class="图片名" className="样式类"></svg-icon>
<svg-icon icon-class="rain" className="iconBig"></svg-icon>
相关文章:
vue全局使用svg
1、安装依赖 npm install svg-sprite-loader2、配置选项 在vue.config.js的chainWebpack里配置下面代码 解释:config.module.rule是一个方法,用来获取某个对象的规则。.exclude.add(文件a)是往禁用组添加文件a,就是对文…...
每天一点C++——杂记
结构体的深拷贝和浅拷贝 浅拷贝就是只拷贝指针,并不拷贝指针所指向的内容,深拷贝则会对指针的内容进行拷贝。浅拷贝会在一些场景下出现问题,看下面的例子: struct s {char * name;int age; };如果我定义 一个对象s1,…...
Document Imaging SDK 11.6 for .NET Crack
Document Imaging SDK for .NET View, Convert, Annotate, Process,Edit, Scan, OCR, Print 基本上被认为是一种导出 PDF 解决方案,能够为用户和开发人员提供完整且创新的 PDF 文档处理属性。它具有提供简单集成的能力,可用于增强用户 .NET 的文档成像程…...
数据挖掘(3.1)--频繁项集挖掘方法
目录 1.Apriori算法 Apriori性质 伪代码 apriori算法 apriori-gen(Lk-1)【候选集产生】 has_infrequent_subset(c,Lx-1)【判断候选集元素】 例题 求频繁项集: 对于频繁项集L{B,C,E},可以得到哪些关联规则: 2.FP-growth算法 FP-tre…...
2023年信息安全推荐证书
随着网络安全行业的不断升温,相关的认证数量也不断增加,对于在网络安全行业发展的人才来说,提升职业竞争力最有效的办法之一,就是取得权威认证。 那么如何从繁多的适合网络安全从业者的证书中选择含金量高、发展潜力大的证书&…...
基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域应用
【自选】 时间地点:2023年7月22日-28日【乌鲁木齐】时间地点:2023年8月12日-18日【福建泉州】 【六天实践教学、提供全部资料】 专题一、空间数据获取与制图 1.1 软件安装与应用讲解 1.2 空间数据介绍 1.3海量空间数据下载 1.4 ArcGIS软件快速入门…...
基于ZC序列的帧同步
Zadoff-Chu序列是一种特殊的序列,具有良好的自相关性和很低的互相关性,这种性能可以被用来产生同步信号,作为对时间和频率的相关运算在TD-LTE系统中,Zadoff-Chu(ZC)序列主要应用于上行RS序列生成、PRACH前导序列生成以及主同步信号…...
配置NFS服务器-debian
NFS(Network Files System)是网络文件系统的英文缩写,由Sun公司于1980年开发,用于在UNIX操作系统间实现磁盘文件共享。在Linux操作系统出现后,NFS被Linux继承,并成为文件服务的一种标准。 通过网络,NFS可以在不同文件…...
正点原子STEMWIN死机
在用正点原子STM32F4开发板,搭配对应的button历程时,发现运行一会,button都无法使用了,以为是emwin死机了,但是看到Led还在闪烁,排除系统死机问题。那就是emwin的任务没有运行起来,但是打断点后…...
PMP考试中的固定答题套路
1、掌握PMBOK 编制的逻辑(整范进,成质资,沟风采,相) 2、事实求是,项目经理该怎么做就怎么做,不能违背职业道德。 3、PM 做事流程(5 步法): ①收集信息&…...
STM32 学习笔记_2 下载,GPIO 介绍
下载 Keil 编译例程 编译两个按钮,一个向下是部分编译,两个向下箭头是全部编译。对于未编译文件两个按钮等效。 点击编译后,linking 是链接,结果里面的几个数据的意义代表大小: 数据类型占用Flash or SRAM说明Code…...
Centos搭建k8s
在CentOS 7上搭建Kubernetes集群 kubeadm官方文档 https://blog.51cto.com/zhangxueliang/4952945 前置步骤(所有结点) CentOS 7.9 物理机或虚拟机三台,CPU 内核数量大于等于 2,且内存大于等于 4Ghostname 不是 localhost&…...
Flutter Flex(Row Column,Expanded, Stack) 组件
前言 这个Flex 继承自 MultiChildRenderObjectWidget,所以是多子布局组件 class Flex extends MultiChildRenderObjectWidget {} Flex 的子组件就是Row 和 Column , 之间的区别就是Flex 的 direction 设置不同。 它有两个轴,一个是MainAxis 还有一个是交…...
《深入探讨:AI在绘画领域的应用与生成对抗网络》
目录 前言: 一 引言 二 生成对抗网络(GAN) 1 生成对抗网络(GAN)简介 2.使用GAN生成艺术作品的实现方法 3,生成图像 三 GAN在艺术创作中的应用 1 风格迁移 2 图像生成: 3 图像修复: 四 使…...
al文章生成-文章生成工具
ai文章生成器 AI文章生成器是一种利用人工智能和自然语言处理技术生成文章的工具。它使用先进的算法、机器学习和深度学习技术,深度挖掘和提取大量数据背后的信息,自主学习并合并新的信息,生成优质、原创的文章。 使用AI文章生成器的优点如下…...
【云原生之Docker实战】使用docker部署webterminal堡垒机
【云原生之Docker实战】使用docker部署webterminal堡垒机 一、webterminal介绍1.webterminal简介2.webterminal特点二、检查本地docker环境1.检查docker版本2.检查操作系统版本3.检查docker状态4.检查docker compose版本三、下载webterminal镜像四、部署webterminal1.创建安装目…...
《低代码PaaS驱动集团企业数字化创新白皮书》-IDC观点
IDC观点 大型集团企业应坚定地走数字化优先发展道路,加深数字化与业务融合 大型企业在长期的经营发展中砥砺前行,形成了较为成熟的业务模式和运营流程,也具备变革 管理等系统性优势。在数字化转型过程中,其庞大的组织架构、复杂的…...
LoRA 指南之 LyCORIS 模型使用
LoRA 指南之 LyCORIS 模型使用 在C站看到这个模型,一眼就非常喜欢 在经历几番挣扎之后终于成功安装 接下来,我们一起开始安装使用吧! 1、根据原作大佬的提示,需要安装两个插件 https://github.com/KohakuBlueleaf/a1111-sd-web…...
[C#]IDisposable
在C#中,继承IDisposable接口的主要作用是在使用一些需要释放资源的对象时,可以显式地管理和释放这些资源,以避免内存泄漏和其他潜在问题。 如果一个类继承了IDisposable接口,那么该类就必须实现Dispose方法。在该类的实例不再需要…...
ROS开发之如何使用RPLidar A1二维激光雷达?
文章目录0.引言1.创建工作空间2.获取rplidar_ros包并编译3.检查雷达端口4.启动launch显示雷达扫描结果0.引言 笔者研究课题涉及多传感器融合,除了前期对ROS工具的学习,还需要用雷达获取数据,进行点云处理。虽然激光雷达已经应用很广泛&#x…...
OpenClaw资源监控:GLM-4.7-Flash任务执行的性能调优
OpenClaw资源监控:GLM-4.7-Flash任务执行的性能调优 1. 为什么需要关注OpenClaw的资源监控 上周我在本地部署了OpenClaw对接GLM-4.7-Flash模型,想实现一个自动整理技术文档的流程。最初只是简单测试了几个文件,运行很顺畅。但当我把整个项目…...
面向高精度应用的数字控制PDH稳频电路设计与实现
1. 数字控制PDH稳频电路的核心价值 在原子钟、引力波探测这类需要亚赫兹级别频率稳定度的尖端实验中,激光稳频技术就像精密机械中的轴承——看似不起眼却决定着整个系统的性能上限。传统模拟PDH(Pound-Drever-Hall)电路虽然能提供MHz量级的反…...
Umi-OCR:开源离线OCR解决方案的全方位实践指南
Umi-OCR:开源离线OCR解决方案的全方位实践指南 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件,适用于Windows系统,支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitcode.com/GitHub_Tren…...
告别繁琐安装:用快马平台在线IDE实现零配置编程初体验
最近在尝试学习编程时,发现很多新手都会卡在开发环境配置这一步。传统的IDE安装过程不仅耗时,还可能遇到各种环境变量配置问题。作为一个过来人,我想分享一个更简单的解决方案——直接在浏览器里就能完成编程初体验。 为什么需要在线IDE 刚开…...
MiniCPM-V-2_6模型蒸馏与部署:解决深度学习模型耦合过度问题
MiniCPM-V-2_6模型蒸馏与部署:解决深度学习模型耦合过度问题 你是不是遇到过这种情况?好不容易训练好一个功能强大的模型,想把它部署到实际应用里,却发现它像一块密不透风的巨石——想改一个小功能,就得动整个模型&am…...
基于STM32与ADS1258的高精度电流数据采集方案实现
1. 高精度电流采集系统设计思路 电流测量在工业自动化、新能源和车载电子等领域都是基础但关键的环节。传统方案使用普通ADC配合分压电阻,精度往往只能达到1%左右,而采用ADS1258这类24位Σ-Δ ADC,配合STM32主控,可以实现0.01%级的…...
Squeezer性能优化指南:提升dApp响应速度的7个技巧
Squeezer性能优化指南:提升dApp响应速度的7个技巧 【免费下载链接】squeezer Squeezer Framework - Build serverless dApps 项目地址: https://gitcode.com/gh_mirrors/sq/squeezer Squeezer Framework作为构建无服务器去中心化应用(dApps)的强大工具&#…...
FlashAttention 终极指南:如何实现4倍加速与20倍内存优化的革命性技术
FlashAttention 终极指南:如何实现4倍加速与20倍内存优化的革命性技术 【免费下载链接】flash-attention Fast and memory-efficient exact attention 项目地址: https://gitcode.com/GitHub_Trending/fl/flash-attention FlashAttention 是一种革命性的注意…...
零代码部署YOLOv9:官方镜像5分钟快速上手,实测效果惊艳
零代码部署YOLOv9:官方镜像5分钟快速上手,实测效果惊艳 1. 为什么选择YOLOv9官方镜像 目标检测领域的最新突破YOLOv9已经发布,但很多开发者在尝试部署时遇到了各种环境配置问题。这个官方预构建的镜像解决了三大核心痛点: 环境配置…...
SpringBoot项目如何动态加载用户上传的Jar包?两种热部署方案对比
SpringBoot动态加载用户Jar包实战:两种热部署方案深度解析 在当今快速迭代的软件开发环境中,插件化架构正成为提升系统扩展性的关键策略。作为Java生态中最流行的框架之一,SpringBoot项目常面临需要动态加载用户自定义Jar包的需求场景。本文将…...
