vue3自定义svg图标组件
可参考：
未来必热：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图标组件
可参考： 未来必热：SVG Sprites技术介绍 懒人神器：svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader 前置知识 在页面中，虽然可以通过如下的方式使用img标签，来引入svg图标。但是，…...
智能火焰与烟雾检测系统（Python+YOLOv5深度学习模型+清新界面）
摘要：智能火焰与烟雾检测系统用于智能日常火灾检测报警，利用摄像头画面实时识别火焰与烟雾，另外支持图片、视频火焰检测并进行结果可视化。本文详细介绍基于智能火焰与烟雾检测系统，在介绍算法原理的同时，给出Python的…...
Java实习生------JUC并发编程（多线程）10道面试题打卡⭐⭐⭐
目录 并行和并发有什么区别？ 线程和进程有什么区别？ 创建线程有哪几种方式？ runnable和callable有什么区别？ 线程的状态及转换？ sleep()和wait()的区别？ run()和start()有什么区别？ 在…...
ChatGPT和百度文心一言写用例，谁更强？
文心一言发布的第一时间，就排队申请了邀请码，昨晚看了下，邀请码已经到手，索性就拿一个例子试了一下，看看哪个能够真正意义上的提高生产力，最简单的录制了个GIF动画如下：问题：你是一个…...
设计模式总结
设计模式的六大原则 开放-封闭原则(OCP) (总原则) Open-Close Principle：该对扩展开放，对修改关闭。 目的就是保证程序的扩展性好，易于维护和升级。 开放-封闭原则是面向对象设计的核心所在, 开闭原则是Java世界里最基础的设计原则。 开闭…...
【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…...
JVM学习.02 内存分配和回收策略
1、前言《JVM学习.01 内存模型》篇讲述了JVM的内存布局，其中每个区域是作用，以及创建实例对象的时候内存区域的工作流程。上文还讲到了关于对象存货后，会被回收清理的过程。今天这里就着重讲一下对象实例是如何被清理回收的，以及清…...
日志收集)
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…...
今天面试了一个2年Java经验的
今天去面试了一个26岁的程序员，看了简历，2年经验，本科，写得很牛叉。 Spring cloud alibaba全家桶、redis，分布式锁，服务调用，数据库事务，线程，Zookeeper、Dubbo 、Rabbi…...
逻辑覆盖测试用例设计
逻辑覆盖测试用例设计 实验目标 能够依据程序画出程序流程图理解常用覆盖方法的内涵理解常用覆盖方法的强弱关系能够使用常用覆盖方法设计测试用例 背景知识 白盒测试通常采用静态测试方法和动态测试方法开展。动态测试是参照系统需求或测试规则，通过预先设计一…...
面试官：说一下MySQL中的锁机制吧
5. 1MySQL有哪些锁？ 为保证数据的一致性，需要对并发操作进行控制，因此产生了锁。同时锁机制也为实现MySQL的各个隔离级别提供了保证。 锁冲突 也是影响数据库并发访问性能的一个重要因素。所以锁对数据库而言显得尤其重要，也更加…...
STL库中list的迭代器实现痛点分析
前文本篇文章准备换个模式，之前都是先详解模拟实现，但是模拟实现的基本逻辑大多数老铁都是明白的，所以我们这次主要讲解STL库中list的独特性，也就是模拟实现中的重难点文末有模拟实现的源码一，list实现的特殊类list实现…...
字符编码对比（GBK、Unicode、UTF-8）
摘要我们在网上能看到各种文字和符号，那么它们是怎么存储和转化的，还有我们常常提及的UTF-8，为什么都要设置这种编码方式，这里就探讨下。字符集字符集：就是各国文字、符号、数字的集合。常见的字符集有：ASC…...
【百面成神】Redis基础11问，你能坚持到第几问
前 言 🍉 作者简介：半旧518，长跑型选手，立志坚持写10年博客，专注于java后端 ☕专栏简介：纯手打总结面试题，自用备用 🌰 文章简介：Redis最基础、重要的11道面试题 文章目录…...
十大排序算法极简汇总篇
说明 十大排序算法可以说是每个程序员都必须得掌握的了，如果你们像从 0 详细学习每一篇，那么你们可以看前面的文章。 但是呢，有些人可能已经学过，想要快速复习一下，看看代码怎么写的，那么可以看这篇十大排…...
数据结构笔记
文章目录第一章：数据结构与算法第二章：稀疏数组和队列一 、稀疏sparsearray 数组（一）案例需求（二）稀疏数组介绍（三）应用实列（四）代码实现二、队列（…...
web前端框架——Vue的特性
目录 前言： 一.vue 二.特性 1.轻量级 2.数据绑定 3.指令 4.插件 三.比较Angular 、React 、Vue 框架之间的比较 1. Angular Angular的优点： 2. React React 的优点： 3.vue 3.Vue的优点： 前言： 本篇文章…...
提权工具推荐（PEASS-ng、linpeas_linux_amd64、winPEASany_ofs）
介绍 在这里，您可以找到适用于Windows、Linux/Unix*和MacOS的权限提升工具。 这些工具搜索您可以利用的可能的本地权限提升路径，并用漂亮的颜色打印给您，这样您就可以很容易地识别错误配置。 查看book.hacktricks.xyz中的本地Windows权限提升检查表WinPEAS-Windows本地权限…...
Spark - 继承 FileOutputFormat 实现向 HDFS 地址追加文件
目录 一.引言 二.源码浅析 1.RDD.saveAsTextFile 2.TextOutputFormat 3.FileOutputFormat 三.源码修改 1.修改文件生成逻辑 - getRecordWriter 2.允许目录存在 - checkoutputSpecs 3.全部代码 - TextOutputFormatV2 四.追加存储代码实战 五.总结 一.引言 Output d…...
树莓派编程控制继电器及继电器组
目录 一，继电器说明 ● 继电器接口说明 ① 继电器输入端: ② 继电器输出端: 二，树莓派控制继电器 三，树莓派控制继电器组 一，继电器说明 通俗点讲，可以把继电器理解成是一些功能设备的控制开关。 ● LOW&#…...
影墨·今颜模型API接口开发与调用全指南
影墨今颜模型API接口开发与调用全指南 你是不是已经成功部署了影墨今颜模型，看着它能在本地生成惊艳的图片，心里正盘算着怎么把它变成一个能对外服务的“产品”？比如，让公司的设计团队直接调用，或者集成到自己的应用里…...
RWKV7-1.5B-g1a效果展示：‘请用一句中文介绍你自己’真实响应
RWKV7-1.5B-g1a效果展示：请用一句中文介绍你自己真实响应 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构开发的多语言文本生成模型，特别适合中文场景下的轻量级对话和文本生成任务。这个1.5B参数的版本在保持响应速度的同时，提供了…...
vLLM-v0.17.1保姆级教程：vLLM + Weights Biases 实验跟踪实践
vLLM-v0.17.1保姆级教程：vLLM Weights & Biases 实验跟踪实践 1. vLLM框架简介 vLLM是一个专注于大语言模型推理和服务的开源库，以其出色的性能和易用性在开发者社区中广受欢迎。这个项目最初由加州大学伯克利分校的天空计算实验室发起࿰…...
Kimi-VL-A3B-Thinking图文问答实操手册：从镜像拉取到Chainlit交互验证
Kimi-VL-A3B-Thinking图文问答实操手册：从镜像拉取到Chainlit交互验证 1. 引言：为什么你需要关注这个图文对话模型？ 想象一下，你手头有一张复杂的图表，或者一份满是文字的截图，你想快速知道里面的关键信息…...
nlp_gte_sentence-embedding_chinese-large保姆级教程：免配置镜像启动+Web界面使用详解
nlp_gte_sentence-embedding_chinese-large保姆级教程：免配置镜像启动Web界面使用详解 你是不是经常遇到这样的问题：手里有一堆文档，想快速找到和某个问题最相关的内容，却只能靠关键词搜索，结果要么漏掉，要…...
Leaf控制台终极指南：实时监控游戏服务器运行状态的完整教程
Leaf控制台终极指南：实时监控游戏服务器运行状态的完整教程 【免费下载链接】leaf A game server framework in Go (golang) 项目地址: https://gitcode.com/gh_mirrors/lea/leaf Leaf控制台是Go语言游戏服务器框架Leaf的强大实时监控工具，为游戏…...
抖音内容一键保存：3分钟搞定无水印批量下载完整指南
抖音内容一键保存：3分钟搞定无水印批量下载完整指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是不是也遇到过这样的烦恼？看到精彩的抖音视频想保存下来反复学习，却…...
如何通过Crowbar实现游戏模组开发全流程效率提升
如何通过Crowbar实现游戏模组开发全流程效率提升 【免费下载链接】Crowbar Crowbar - GoldSource and Source Engine Modding Tool 项目地址: https://gitcode.com/gh_mirrors/crow/Crowbar 在游戏开发领域，技术门槛常成为创意落地的阻碍。Crowbar作为针对Go…...
收藏！程序员转型AI大模型应用开发，必学四大核心技能（小白友好版）
当下AI大模型风口持续爆发，越来越多程序员想抓住机遇转型入局，但大多陷入“盲目跟风、无从下手、学了没用”的困境——其实，转型AI大模型应用开发无需急于求成，不用追求“面面俱到”，先吃透核心技能，搭建完…...
5分钟解锁网盘直链下载：告别限速，拥抱满速自由
5分钟解锁网盘直链下载：告别限速，拥抱满速自由 【免费下载链接】baiduyun 油猴脚本 - 一个免费开源的网盘下载助手 项目地址: https://gitcode.com/gh_mirrors/ba/baiduyun 还在为网盘下载速度而烦恼吗？你是否经历过下载一个几GB的文件…...