当前位置: 首页 > 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…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

职坐标物联网全栈开发全流程解析

物联网全栈开发涵盖从物理设备到上层应用的完整技术链路&#xff0c;其核心流程可归纳为四大模块&#xff1a;感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性&#xff0c;例如传感器选型需平衡精度与…...