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&#…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？
Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说，在叠衣服的过程中，我会带着团队对比各种模型、方法、策略，毕竟针对各个场景始终寻找更优的解决方案，是我个人和我司「七月在线」的职责之一 且个人认为，…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...