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

vue全局使用svg

1、安装依赖

 npm install svg-sprite-loader

2、配置选项
vue.config.jschainWebpack里配置下面代码
解释: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下面写组件。
![在这里插入图片描述](https://img-blog.csdnimg.cn/32965f01cca749f19275783e8959b175.png

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里配置下面代码 解释&#xff1a;config.module.rule是一个方法&#xff0c;用来获取某个对象的规则。.exclude.add&#xff08;文件a&#xff09;是往禁用组添加文件a&#xff0c;就是对文…...

每天一点C++——杂记

结构体的深拷贝和浅拷贝 浅拷贝就是只拷贝指针&#xff0c;并不拷贝指针所指向的内容&#xff0c;深拷贝则会对指针的内容进行拷贝。浅拷贝会在一些场景下出现问题&#xff0c;看下面的例子&#xff1a; struct s {char * name;int age; };如果我定义 一个对象s1&#xff0c;…...

Document Imaging SDK 11.6 for .NET Crack

Document Imaging SDK for .NET View, Convert, Annotate, Process,Edit, Scan, OCR, Print 基本上被认为是一种导出 PDF 解决方案&#xff0c;能够为用户和开发人员提供完整且创新的 PDF 文档处理属性。它具有提供简单集成的能力&#xff0c;可用于增强用户 .NET 的文档成像程…...

数据挖掘(3.1)--频繁项集挖掘方法

目录 1.Apriori算法 Apriori性质 伪代码 apriori算法 apriori-gen(Lk-1)【候选集产生】 has_infrequent_subset(c,Lx-1)【判断候选集元素】 例题 求频繁项集&#xff1a; 对于频繁项集L{B,C,E}&#xff0c;可以得到哪些关联规则&#xff1a; 2.FP-growth算法 FP-tre…...

2023年信息安全推荐证书

随着网络安全行业的不断升温&#xff0c;相关的认证数量也不断增加&#xff0c;对于在网络安全行业发展的人才来说&#xff0c;提升职业竞争力最有效的办法之一&#xff0c;就是取得权威认证。 那么如何从繁多的适合网络安全从业者的证书中选择含金量高、发展潜力大的证书&…...

基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域应用

【自选】 时间地点&#xff1a;2023年7月22日-28日【乌鲁木齐】时间地点&#xff1a;2023年8月12日-18日【福建泉州】 【六天实践教学、提供全部资料】 专题一、空间数据获取与制图 1.1 软件安装与应用讲解 1.2 空间数据介绍 1.3海量空间数据下载 1.4 ArcGIS软件快速入门…...

基于ZC序列的帧同步

Zadoff-Chu序列是一种特殊的序列&#xff0c;具有良好的自相关性和很低的互相关性&#xff0c;这种性能可以被用来产生同步信号&#xff0c;作为对时间和频率的相关运算在TD-LTE系统中&#xff0c;Zadoff-Chu(ZC)序列主要应用于上行RS序列生成、PRACH前导序列生成以及主同步信号…...

配置NFS服务器-debian

NFS(Network Files System)是网络文件系统的英文缩写&#xff0c;由Sun公司于1980年开发&#xff0c;用于在UNIX操作系统间实现磁盘文件共享。在Linux操作系统出现后&#xff0c;NFS被Linux继承&#xff0c;并成为文件服务的一种标准。 通过网络&#xff0c;NFS可以在不同文件…...

正点原子STEMWIN死机

在用正点原子STM32F4开发板&#xff0c;搭配对应的button历程时&#xff0c;发现运行一会&#xff0c;button都无法使用了&#xff0c;以为是emwin死机了&#xff0c;但是看到Led还在闪烁&#xff0c;排除系统死机问题。那就是emwin的任务没有运行起来&#xff0c;但是打断点后…...

PMP考试中的固定答题套路

1、掌握PMBOK 编制的逻辑&#xff08;整范进&#xff0c;成质资&#xff0c;沟风采&#xff0c;相&#xff09; 2、事实求是&#xff0c;项目经理该怎么做就怎么做&#xff0c;不能违背职业道德。 3、PM 做事流程&#xff08;5 步法&#xff09;&#xff1a; ①收集信息&…...

STM32 学习笔记_2 下载,GPIO 介绍

下载 Keil 编译例程 编译两个按钮&#xff0c;一个向下是部分编译&#xff0c;两个向下箭头是全部编译。对于未编译文件两个按钮等效。 点击编译后&#xff0c;linking 是链接&#xff0c;结果里面的几个数据的意义代表大小&#xff1a; 数据类型占用Flash or SRAM说明Code…...

Centos搭建k8s

在CentOS 7上搭建Kubernetes集群 kubeadm官方文档 https://blog.51cto.com/zhangxueliang/4952945 前置步骤&#xff08;所有结点&#xff09; CentOS 7.9 物理机或虚拟机三台&#xff0c;CPU 内核数量大于等于 2&#xff0c;且内存大于等于 4Ghostname 不是 localhost&…...

Flutter Flex(Row Column,Expanded, Stack) 组件

前言 这个Flex 继承自 MultiChildRenderObjectWidget&#xff0c;所以是多子布局组件 class Flex extends MultiChildRenderObjectWidget {} Flex 的子组件就是Row 和 Column , 之间的区别就是Flex 的 direction 设置不同。 它有两个轴&#xff0c;一个是MainAxis 还有一个是交…...

《深入探讨:AI在绘画领域的应用与生成对抗网络》

目录 前言&#xff1a; 一 引言 二 生成对抗网络&#xff08;GAN&#xff09; 1 生成对抗网络&#xff08;GAN&#xff09;简介 2.使用GAN生成艺术作品的实现方法 3,生成图像 三 GAN在艺术创作中的应用 1 风格迁移 2 图像生成&#xff1a; 3 图像修复&#xff1a; 四 使…...

al文章生成-文章生成工具

ai文章生成器 AI文章生成器是一种利用人工智能和自然语言处理技术生成文章的工具。它使用先进的算法、机器学习和深度学习技术&#xff0c;深度挖掘和提取大量数据背后的信息&#xff0c;自主学习并合并新的信息&#xff0c;生成优质、原创的文章。 使用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观点 大型集团企业应坚定地走数字化优先发展道路&#xff0c;加深数字化与业务融合 大型企业在长期的经营发展中砥砺前行&#xff0c;形成了较为成熟的业务模式和运营流程&#xff0c;也具备变革 管理等系统性优势。在数字化转型过程中&#xff0c;其庞大的组织架构、复杂的…...

LoRA 指南之 LyCORIS 模型使用

LoRA 指南之 LyCORIS 模型使用 在C站看到这个模型&#xff0c;一眼就非常喜欢 在经历几番挣扎之后终于成功安装 接下来&#xff0c;我们一起开始安装使用吧&#xff01; 1、根据原作大佬的提示&#xff0c;需要安装两个插件 https://github.com/KohakuBlueleaf/a1111-sd-web…...

[C#]IDisposable

在C#中&#xff0c;继承IDisposable接口的主要作用是在使用一些需要释放资源的对象时&#xff0c;可以显式地管理和释放这些资源&#xff0c;以避免内存泄漏和其他潜在问题。 如果一个类继承了IDisposable接口&#xff0c;那么该类就必须实现Dispose方法。在该类的实例不再需要…...

ROS开发之如何使用RPLidar A1二维激光雷达?

文章目录0.引言1.创建工作空间2.获取rplidar_ros包并编译3.检查雷达端口4.启动launch显示雷达扫描结果0.引言 笔者研究课题涉及多传感器融合&#xff0c;除了前期对ROS工具的学习&#xff0c;还需要用雷达获取数据&#xff0c;进行点云处理。虽然激光雷达已经应用很广泛&#x…...

天硕(TOPSSD)深度解析:存储介质分类视角下,SSD固态硬盘如何一步步演进?

在信息技术持续迭代的背景下&#xff0c;存储介质的选择已不再局限于容量与成本&#xff0c;而逐渐成为决定系统性能上限、响应延迟与长期稳定性的关键因素。从光学存储到机械硬盘&#xff08;HDD&#xff09;&#xff0c;再到以半导体技术为核心的SSD固态硬盘&#xff0c;每一…...

EVA-01部署教程:Qwen2.5-VL-7B模型服务API封装+NERV风格响应协议

EVA-01部署教程&#xff1a;Qwen2.5-VL-7B模型服务API封装NERV风格响应协议 1. 引言&#xff1a;欢迎来到NERV指挥中心 想象一下&#xff0c;你面前有一个能“看懂”图片的智能助手&#xff0c;但它不是普通的聊天窗口&#xff0c;而是一个充满未来感的机甲驾驶舱。紫色的装甲…...

BGE-M3快速入门:多语言文本相似度分析从零到一

BGE-M3快速入门&#xff1a;多语言文本相似度分析从零到一 1. 引言&#xff1a;从“关键词匹配”到“语义理解” 你有没有遇到过这样的场景&#xff1f;在搜索引擎里输入“苹果”&#xff0c;结果既出现了水果&#xff0c;也出现了手机公司。或者&#xff0c;你想找“如何学习…...

BetterGI 0.38.1版本安装失败?3步快速解决原神自动化工具启动问题

BetterGI 0.38.1版本安装失败&#xff1f;3步快速解决原神自动化工具启动问题 【免费下载链接】better-genshin-impact &#x1f368;BetterGI 更好的原神 - 自动拾取 | 自动剧情 | 全自动钓鱼(AI) | 全自动七圣召唤 | 自动伐木 | 自动派遣 | 一键强化 - UI Automation Testin…...

cv_resnet50_face-reconstruction效果对比:不同光照/姿态下人脸重建质量实测报告

cv_resnet50_face-reconstruction效果对比&#xff1a;不同光照/姿态下人脸重建质量实测报告 你是不是也好奇&#xff0c;一个基于ResNet50的人脸重建模型&#xff0c;到底能把一张照片还原到什么程度&#xff1f;它能不能处理好那些光线不好、角度刁钻的照片&#xff1f;今天…...

CSS图片轮播进阶:5种实现无限循环滚动的实战技巧(附完整代码)

CSS图片轮播进阶&#xff1a;5种实现无限循环滚动的实战技巧&#xff08;附完整代码&#xff09; 在电商网站的首页或个人作品集的展示页面中&#xff0c;图片轮播&#xff08;Carousel&#xff09;始终是吸引用户注意力的利器。而无限循环滚动效果&#xff0c;则能让有限的展示…...

DriverStore Explorer:释放磁盘空间的开源驱动管理工具

DriverStore Explorer&#xff1a;释放磁盘空间的开源驱动管理工具 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 1. 诊断驱动膨胀&#xff1a;3个隐藏原因解析 你的C盘空间是…...

Suricata在CentOS7上的性能优化:如何配置网卡混杂模式与端口聚合

Suricata在CentOS7上的性能优化&#xff1a;网卡混杂模式与端口聚合实战指南 当企业网络流量突破千兆级别时&#xff0c;传统单网卡监控方案往往力不从心。我曾为某金融客户部署Suricata时&#xff0c;单台服务器每天要处理超过2TB的流量数据&#xff0c;正是通过下文介绍的网卡…...

OpenClaw安全实践:GLM-4.7-Flash本地化部署的权限控制指南

OpenClaw安全实践&#xff1a;GLM-4.7-Flash本地化部署的权限控制指南 1. 为什么需要关注OpenClaw的权限控制&#xff1f; 去年夏天&#xff0c;我在整理电脑上的财务报告时&#xff0c;无意中发现OpenClaw自动将我的税务文件同步到了一个陌生目录。这个意外让我意识到——当…...

ApiPost实战指南:从接口创建到自动化测试的全流程解析

1. 从零开始创建你的第一个API接口 作为一个常年和API打交道的开发者&#xff0c;我深知新手第一次接触接口工具时的迷茫。ApiPost作为一款国产的API开发工具&#xff0c;用起来确实比Postman更顺手&#xff0c;特别是对中文用户特别友好。下面我就带你一步步创建第一个接口&am…...