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

vue3自定义svg图标组件

news 2025/11/10 17:53:03

可参考：
未来必热：SVG Sprites技术介绍
懒人神器：svg-sprite-loader实现自己的Icon组件
在Vue3项目中使用svg-sprite-loader

前置知识

在页面中，虽然可以通过如下的方式使用img标签，来引入svg图标。但是，如果这个路径很长，也是比较麻烦的。

<img src="./svg/icon.svg" />

在svg里面，可以在文档中先定义Symbol，然后svg使用的时候，只须通过标识去引用指定的svg即可，Symbol的放置顺序不一定要在最前面，案例如下：
在这里插入图片描述

<html><head><meta charset="utf-8"><title>SVG Sprite使用</title><style>li {font-size: 14px;margin-top: 5px;color: #369;}.webicon {width: 16px;height: 16px;margin-right: 5px;vertical-align: -2px;fill: #369;}</style>
</head><body><div style="display: none;"><svg><symbol id="liwu" viewBox="-80 -72.013 160 144.025"><pathd="M-71.949-16.039h55.974v-55.974h-55.974V-16.039z M16.102-16.039h55.975v-55.974H16.102V-16.039z M-80,32.013h64.025v-40H-80V32.013z M80,32.013v-40H16.102v40H80z M-7.923,32.013H8.051V-72.013H-7.923V32.013z M16.102,39.936 h-32.077v24.025h32.077V39.936z M64.025,39.936h-40l15.719,32.077h24.281V39.936z M-23.898,39.936h-40v32.077H-40L-23.898,39.936z"transform="matrix(1 0 0 -1 0 0)"></path></symbol><symbol id="qianbi" viewBox="-79.5 -79.5 159 159"><pathd="M79.5,32.802l-93.538-93.538l-46.699,46.699L32.802,79.5L79.5,32.802z M-79.5-32.802L-32.802-79.5H-79.5 V-32.802z"transform="matrix(1 0 0 -1 0 0)"></path></symbol><symbol id="shangchuan" viewBox="-73.623 -78.055 147.245 156.11"><pathd="M0.069,32.482L64.48-32.205H36.915v-45.85h-73.83l-0.139,45.85h-27.15L0.069,32.482z M73.623,78.055V59.632 H-73.623v18.423H73.623z"transform="matrix(1 0 0 -1 0 0)"></path></symbol></svg></div><h3>SVG Sprite使用示意</h3><ul><li><svg class="webicon"><use xlink:href="#qianbi"></use></svg>编辑信息</li><li><svg class="webicon"><use xlink:href="#liwu"></use></svg>兑换礼物</li><li><svg class="webicon"><use xlink:href="#shangchuan"></use></svg>上传文件</li></ul></div>
</body></html>

自定义svg图标步骤

1. 创建components/SvgIcon/index.vue

<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({icon: {type: String,required: true}
})const iconName = computed(() => {return `#icon-${props.icon}`
})
</script><style lang="scss" scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

2. 创建icons/index.js，

创建icons/index.js，并创建icons/svg图标所在文件夹，icon的图标就放在这个文件夹中。这里是动态的

import SvgIcon from '@/components/SvgIcon'const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))export default (app) => {app.component('svg-icon', SvgIcon)
}

3. main.js中注册SvgIcon组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'//import '@/assets/styles/index.scss'
import '@/assets/styles/border.css'
import '@/assets/styles/reset.css'
import '@/router/permission.js'
// import '@/router/init.js'
import {totalCommon} from '@/sys/mixinFunc.js'import SvgIcon from '@/icons'// 国际化中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'const app = createApp(App)
SvgIcon(app);app.mixin(totalCommon);app.use(ElementPlus, {locale: zhCn,
})app.use(store)
app.use(router)
app.use(ElementPlus)app.mount('#app')

4. vite.config.js配置svg-sprite-loader

首先，安装scg-sprite-loader

const webpack = require('webpack');const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {lintOnSave: false,chainWebpack(config) {// 设置 svg-sprite-loader// config 为 webpack 配置对象// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则.rule('svg')// 忽略.exclude.add(resolve('src/icons'))// 结束.end()// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则.rule('icons')// 正则，解析 .svg 格式文件.test(/\.svg$/)// 解析的文件.include.add(resolve('src/icons'))// 结束.end()// 新增了一个解析的loader.use('svg-sprite-loader')// 具体的loader.loader('svg-sprite-loader')// loader 的配置.options({symbolId: 'icon-[name]'})// 结束.end()config.plugin('ignore').use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/))config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
}

相关文章：

vue3自定义svg图标组件

可参考&#xff1a; 未来必热&#xff1a;SVG Sprites技术介绍 懒人神器&#xff1a;svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader 前置知识 在页面中&#xff0c;虽然可以通过如下的方式使用img标签&#xff0c;来引入svg图标。但是&#xff0c;…...

编程日记 2023/3/22 16:41:27

智能火焰与烟雾检测系统（Python+YOLOv5深度学习模型+清新界面）

摘要&#xff1a;智能火焰与烟雾检测系统用于智能日常火灾检测报警&#xff0c;利用摄像头画面实时识别火焰与烟雾&#xff0c;另外支持图片、视频火焰检测并进行结果可视化。本文详细介绍基于智能火焰与烟雾检测系统&#xff0c;在介绍算法原理的同时&#xff0c;给出Python的…...

编程日记 2023/3/22 16:36:26

Java实习生------JUC并发编程（多线程）10道面试题打卡⭐⭐⭐

目录 并行和并发有什么区别&#xff1f; 线程和进程有什么区别&#xff1f; 创建线程有哪几种方式&#xff1f; runnable和callable有什么区别&#xff1f; 线程的状态及转换&#xff1f; sleep()和wait()的区别&#xff1f; run()和start()有什么区别&#xff1f; 在…...

编程日记 2023/3/22 16:31:24

ChatGPT和百度文心一言写用例，谁更强？

文心一言发布的第一时间&#xff0c;就排队申请了邀请码&#xff0c;昨晚看了下&#xff0c;邀请码已经到手&#xff0c;索性就拿一个例子试了一下&#xff0c;看看哪个能够真正意义上的提高生产力&#xff0c;最简单的录制了个GIF动画如下&#xff1a;问题&#xff1a;你是一个…...

编程日记 2023/3/22 16:26:22

设计模式总结

设计模式的六大原则 开放-封闭原则(OCP) (总原则) Open-Close Principle&#xff1a;该对扩展开放&#xff0c;对修改关闭。 目的就是保证程序的扩展性好&#xff0c;易于维护和升级。 开放-封闭原则是面向对象设计的核心所在, 开闭原则是Java世界里最基础的设计原则。 开闭…...

编程日记 2023/3/22 16:21:18

【K8S系列】深入解析Pod对象(一)

目录 序言 1.问题引入 1.1 问题描述 2 问题解答 2.1 pod 属性 2.1.1 NodeSelector 2.1.2 HostAliases 2.1.3 shareProcessNamespace 2.1.4 NodeName 2.1.5 其他pod属性 2.2 容器属性 2.2.1 ImagePullPolicy 2.2.2 Lifecycle 3 总结 4. 投票 序言 任何一件事情&am…...

编程日记 2023/3/22 16:16:16

JVM学习.02 内存分配和回收策略

1、前言《JVM学习.01 内存模型》篇讲述了JVM的内存布局&#xff0c;其中每个区域是作用&#xff0c;以及创建实例对象的时候内存区域的工作流程。上文还讲到了关于对象存货后&#xff0c;会被回收清理的过程。今天这里就着重讲一下对象实例是如何被清理回收的&#xff0c;以及清…...

编程日记 2023/3/22 16:11:14

logstash+elasticsearch+Kibana(ELK)日志收集

文章目录一.安装ELK 7.17二.为Elasticsearch设置密码三.配置logstash四.springboot整合logstash五.spring整合Elastic Search一.安装ELK 7.17 不要一股脑执行以下语句,请观察修改要修改的地方 安装logstash # logstash安装docker run -d --name logstash \-p 5043:5043 -p 5…...

编程日记 2023/4/12 17:27:53

今天面试了一个2年Java经验的

今天去面试了一个26岁的程序员&#xff0c;看了简历&#xff0c;2年经验&#xff0c;本科&#xff0c;写得很牛叉。 Spring cloud alibaba全家桶、redis&#xff0c;分布式锁&#xff0c;服务调用&#xff0c;数据库事务&#xff0c;线程&#xff0c;Zookeeper、Dubbo 、Rabbi…...

编程日记 2023/3/22 16:01:10

逻辑覆盖测试用例设计

逻辑覆盖测试用例设计 实验目标 能够依据程序画出程序流程图理解常用覆盖方法的内涵理解常用覆盖方法的强弱关系能够使用常用覆盖方法设计测试用例 背景知识 白盒测试通常采用静态测试方法和动态测试方法开展。动态测试是参照系统需求或测试规则&#xff0c;通过预先设计一…...

编程日记 2023/4/13 5:10:11

面试官：说一下MySQL中的锁机制吧

5. 1MySQL有哪些锁&#xff1f; 为保证数据的一致性&#xff0c;需要对并发操作进行控制&#xff0c;因此产生了锁。同时锁机制也为实现MySQL的各个隔离级别提供了保证。 锁冲突 也是影响数据库并发访问性能的一个重要因素。所以锁对数据库而言显得尤其重要&#xff0c;也更加…...

编程日记 2023/3/22 15:51:04

STL库中list的迭代器实现痛点分析

前文本篇文章准备换个模式&#xff0c;之前都是先详解模拟实现&#xff0c;但是模拟实现的基本逻辑大多数老铁都是明白的&#xff0c;所以我们这次主要讲解STL库中list的独特性&#xff0c;也就是模拟实现中的重难点文末有模拟实现的源码一&#xff0c;list实现的特殊类list实现…...

编程日记 2023/3/22 15:46:01

字符编码对比（GBK、Unicode、UTF-8）

摘要我们在网上能看到各种文字和符号&#xff0c;那么它们是怎么存储和转化的&#xff0c;还有我们常常提及的UTF-8&#xff0c;为什么都要设置这种编码方式&#xff0c;这里就探讨下。字符集字符集&#xff1a;就是各国文字、符号、数字的集合。常见的字符集有&#xff1a;ASC…...

编程日记 2023/4/13 5:09:57

【百面成神】Redis基础11问，你能坚持到第几问

前 言 &#x1f349; 作者简介&#xff1a;半旧518&#xff0c;长跑型选手&#xff0c;立志坚持写10年博客&#xff0c;专注于java后端 ☕专栏简介&#xff1a;纯手打总结面试题&#xff0c;自用备用 &#x1f330; 文章简介&#xff1a;Redis最基础、重要的11道面试题 文章目录…...

编程日记 2023/3/22 15:35:58

十大排序算法极简汇总篇

说明 十大排序算法可以说是每个程序员都必须得掌握的了&#xff0c;如果你们像从 0 详细学习每一篇&#xff0c;那么你们可以看前面的文章。 但是呢&#xff0c;有些人可能已经学过&#xff0c;想要快速复习一下&#xff0c;看看代码怎么写的&#xff0c;那么可以看这篇十大排…...

编程日记 2023/3/22 15:30:56

数据结构笔记

文章目录第一章&#xff1a;数据结构与算法第二章&#xff1a;稀疏数组和队列一 、稀疏sparsearray 数组&#xff08;一&#xff09;案例需求&#xff08;二&#xff09;稀疏数组介绍&#xff08;三&#xff09;应用实列&#xff08;四&#xff09;代码实现二、队列&#xff08…...

编程日记 2023/3/22 15:25:51

web前端框架——Vue的特性

目录 前言&#xff1a; 一.vue 二.特性 1.轻量级 2.数据绑定 3.指令 4.插件 三.比较Angular 、React 、Vue 框架之间的比较 1. Angular Angular的优点&#xff1a; 2. React React 的优点&#xff1a; 3.vue 3.Vue的优点&#xff1a; 前言&#xff1a; 本篇文章…...

编程日记 2023/3/22 15:20:49

提权工具推荐（PEASS-ng、linpeas_linux_amd64、winPEASany_ofs）

介绍 在这里，您可以找到适用于Windows、Linux/Unix*和MacOS的权限提升工具。 这些工具搜索您可以利用的可能的本地权限提升路径，并用漂亮的颜色打印给您，这样您就可以很容易地识别错误配置。 查看book.hacktricks.xyz中的本地Windows权限提升检查表WinPEAS-Windows本地权限…...

编程日记 2023/3/22 15:15:47

Spark - 继承 FileOutputFormat 实现向 HDFS 地址追加文件

目录 一.引言 二.源码浅析 1.RDD.saveAsTextFile 2.TextOutputFormat 3.FileOutputFormat 三.源码修改 1.修改文件生成逻辑 - getRecordWriter 2.允许目录存在 - checkoutputSpecs 3.全部代码 - TextOutputFormatV2 四.追加存储代码实战 五.总结 一.引言 Output d…...

编程日记 2023/4/12 17:31:12

树莓派编程控制继电器及继电器组

目录 一&#xff0c;继电器说明 ● 继电器接口说明 ① 继电器输入端: ② 继电器输出端: 二&#xff0c;树莓派控制继电器 三&#xff0c;树莓派控制继电器组 一&#xff0c;继电器说明 通俗点讲&#xff0c;可以把继电器理解成是一些功能设备的控制开关。 ● LOW&#…...

编程日记 2023/4/13 5:12:16

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/11/9 9:12:25

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/11/7 14:10:36

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/11/9 10:41:11

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...

编程新知 2025/11/10 7:02:31

云原生安全实战：API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

编程新知 2025/11/10 5:49:13

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...

编程新知 2025/11/9 9:03:39

生成对抗网络（GAN）损失函数解读

GAN损失函数的形式&#xff1a; 以下是对每个部分的解读&#xff1a; 1. ⁡, ​ &#xff1a;这个部分表示生成器&#xff08;Generator&#xff09;G的目标是最小化损失函数。 &#xff1a;判别器&#xff08;Discriminator&#xff09;D的目标是最大化损失函数。 GAN的训…...

编程新知 2025/11/10 5:57:51

scan_mode设计原则

scan_mode设计原则 在进行mtp controller设计时&#xff0c;基本功能设计完成后&#xff0c;需要设计scan_mode设计。 1、在进行scan_mode设计时&#xff0c;需要保证mtp处于standby模式&#xff0c;不会有擦写、编程动作。 2、只需要固定mtp datasheet说明的接口即可&#xf…...

编程新知 2025/9/10 18:47:16

Qt Quick模块功能及架构

Qt 6.0 中的 Qt Quick 模块是构建现代、动态用户界面的核心框架&#xff0c;基于声明式编程&#xff08;QML&#xff09;和 JavaScript&#xff0c;专注于高性能、流畅的动画和跨平台 UI 开发。、 一、主要功能改进 1. Qt Quick 核心架构 QML 引擎升级&#xff1a;Qt 6.0 使用…...

编程新知 2025/8/12 20:23:38