vue23自定义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>
vue3+vite自定义svg图标组件
可参考：Vue3后台管理系统（四）SVG图标
1、安装 vite-plugin-svg-icons
npm i fast-glob@3.2.11 -D
npm i vite-plugin-svg-icons@2.0.1 -D
2、创建图标文件夹
在src/assets文件夹下新建icons文件夹，用于存放下载的 SVG 图标
3、vite.config.js 插件配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: 'icon-[dir]-[name]',})],resolve: {alias: {'@': path.resolve(__dirname, './src')}}
})4、SvgIcon组件封装
<!--src/components/SvgIcon/index.vue-->
<template><svgaria-hidden="true"class="svg-icon":style="'width:' + size + ';height:' + size"><use :xlink:href="symbolId" :fill="color"/></svg>
</template><script setup lang="ts">
import {computed} from 'vue';const props = defineProps({prefix: {type: String,default: 'icon'},iconClass: {type: String,required: false},color: {type: String},size: {type: String,default: '1em'}
});const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script><style scoped>
.svg-icon {overflow: hidden;fill: currentColor;
}
</style>
5、main.js 引入注册脚本
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import router from '@/router'
import store from '@/store'// 不知道这个东西是哪来的，但是没它的话，html下面就没有那个Symbol的定义了
import 'virtual:svg-icons-register';import SvgIcon from '@/components/SvgIcon/index.vue'const app = createApp(App)
app.use(router)
app.use(store)// 注册全局组件
app.component('SvgIcon',SvgIcon)app.mount('#app')
6、Home.vue中使用SvgIcon组件
<template>home<svg-icon icon-class="tree" size="40px"/><svg-icon icon-class="tree2" size="50px"/>
</template><script setup></script><style lang="scss"></style>
7、图标选择器
IconSelect.vue
在src/components文件夹下新建IconSelect文件夹，并在IconSelect文件夹下新建index.vue
<template><div class="icon-select"><el-inputv-model="iconName"clearableplaceholder="请输入图标名称"@clear="filterIcons"@input="filterIcons"><template #suffix><i class="el-icon-search el-input__icon" /></template></el-input><div class="icon-select__list"><divv-for="(item, index) in iconList":key="index"@click="selectedIcon(item)"><svg-iconcolor="#999":icon-class="item"style="height: 30px; width: 16px; margin-right: 5px"/><span>{{ item }}</span></div></div></div></template><script setup>import { ref } from 'vue';import SvgIcon from '@/components/SvgIcon/index.vue';const icons = [] ;const modules = import.meta.glob('../../assets/icons/*.svg');for (const path in modules) {const p = path.split('assets/icons/')[1].split('.svg')[0];icons.push(p);}const iconList = ref(icons);const iconName = ref('');const emit = defineEmits(['selected']);function filterIcons() {iconList.value = icons;if (iconName.value) {iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1);}}function selectedIcon(name) {emit('selected', name);document.body.click();}function reset() {iconName.value = '';iconList.value = icons;}defineExpose({reset});</script><style lang="scss" scoped>.icon-select {width: 100%;padding: 10px;&__list {height: 200px;overflow-y: scroll;div {height: 30px;line-height: 30px;margin-bottom: -5px;cursor: pointer;width: 33%;float: left;}span {display: inline-block;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}}}</style>
Home.vue中使用IconSelect
<template>home<!-- <svg-icon icon-class="tree" size="40px"/><svg-icon icon-class="tree2" size="50px"/> --><div style="width:300px"><icon-select @selected="selected"></icon-select></div>
</template><script setup>
import IconSelect from '@/components/IconSelect/index.vue'
import { reactive, ref } from "vue";const state = reactive({icon: '',
})function selected(name) {console.log(state.icon)state.icon = name;
}</script><style lang="scss"></style>
vue2自定义svg图标组件
1. 安装svg-sprite-loader
npm install svg-sprite-loader -D
2. 创建图标所在文件夹
在项目 src 目录下新建 src/icons/svg 目录（存放 svg 图标文件）。
3. 配置vue.config.js
const { defineConfig } = require('@vue/cli-service')const path = require('path')
const resolve = dir => path.join(__dirname, dir)module.exports = defineConfig({transpileDependencies: true,chainWebpack(config) {// 配置 svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()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()}
})4. SvgIcon.vue图标组件封装
在src/components下创建SvgIcon.vue
（或者：在src/components下创建SvgIcon文件夹，在里边创建index.vue）
<template><svg className="svg-icon" aria-hidden="true"><use :xlink:href="iconName"/></svg>
</template>
<style>
.svg-icon {width: 1.5em;height: 1.5em;
}
</style>
<script>
export default {props: {iconClass: {type: String,required: true}},computed: {iconName () {return `#icon-${this.iconClass}`}}
}
</script>
5.创建svg文件的入口文件icon.js
在 src/icons 下创建 icons 目录的入口文件 index.js ，负责svg文件的加载
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)/*** require.context 的参数说明* './svg' 代表要查找的文件路径* false 代表是否查找子目录* /\.svg$/ 代表要匹配文件的正则**/
const svg = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
requireAll(svg)
6.main.js中引入icon.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import '@/icons'Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')7. Home.vue中使用SvgIcon组件
<template><div>Home<svg-icon icon-class="tree"></svg-icon><svg-icon icon-class="tree2"></svg-icon></div>
</template><script>export default {name: 'Home',components: {}
}
</script><style></style>
相关文章：
vue23自定义svg图标组件
可参考： 未来必热：SVG Sprites技术介绍 懒人神器：svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader 前置知识 在页面中，虽然可以通过如下的方式使用img标签，来引入svg图标。但是，…...
相机雷达时间同步（基于ROS）
文章目录运行环境：思路：同步前和同步后效果对比1.1创建工作空间1.2创建功能包2.1编写源文件2.2编写头文件2.3编写可执行文件2.4配置文件3.1编译运行4.1录制时间同步后的rosbag4.2rviz可视化rosbag运行环境： ubuntu20.04 noetic usb_cam 速腾R…...
素数环PrimeRing [3*]
目录 素数环PrimeRing [3*] 程序设计 程序分析 素数环PrimeRing [3*] 把1~N这N个整数摆成一个环，要求任意相邻两个数的和为素数。按字典序打印出以1开始的素数环 Input 一个整数N (<=10) Output 每行一个素数环。每个数之间用一个空格隔开。 无解输出 No Solution Sampl…...
mongodb 连接池配置
参考官方描述： 如果spring使用以下mongodb的配置，则默认是没有连接池的 spring:data:mongodb:host: 地址port: 27017database: 数据库名username: 账号password: 密码 每隔一两分钟没有去请求的话就会断开连接重连，每次都要等待5-10秒之间才…...
数据在内存中的存储（深度剖析）
目录 1.数据类型介绍 1.1类型分类 2.整形在内存中的存储 2.1原码，反码，补码 2.2大小端介绍 2.3练习 3.浮点型在内存中的存储 3.1浮点数存储规则 引入： 有正负的数据可以存放在有符号的变量中 只有正数的数据可以存放在无符号的变量…...
python 实现二叉搜索树的方法有哪些？
树的介绍 树不同于链表或哈希表，是一种非线性数据结构，树分为二叉树、二叉搜索树、B树、B树、红黑树等等。 树是一种数据结构，它是由n个有限节点组成的一个具有层次关系的集合。用图片来表示的话，可以看到它很像一棵倒挂着的树。…...
ORM概述
1_ORM概述[理解] 解释: 对象关系映射模型特点: 1.将类名,属性, 映射成数据库的表名和字段2.类的对象,会映射成为数据库表中的一行一行的数据 优缺点: 优点: 1.不再需要编写sql语句2.不再关心使用的是什么数据库了 缺点: 1.由于不是直接通过sql操作数据库,所以有性能损失 2_…...
程序员必知必会7种UML图（类图、序列图、组件图、部署图、用例图、状态图和活动图）画法盘点
众所周知，软件开发是一个分阶段进行的过程。不同的开发阶段需要使用不同的模型图来描述业务场景和设计思路，在不同的阶段输出不同的设计文档也是必不可少的，例如，在需求分析阶段需要输出领域模型和业务模型，在架构阶段…...
基于asp的搜索引擎开发和实现
随着因特网的迅猛发展、WEB信息的增加，用户要在信息海洋里查找信息，就像大海捞针一样，搜索引擎技术恰好解决了这一难题。目前，搜索引擎系统可以分类三大类，分别是：目录式搜索引擎：以人工方式或半…...
代码随想录刷题-字符串-实现 strStr()
文章目录实现 strStr()习题暴力解法kmp 解法实现 strStr() 本节对应代码随想录中：代码随想录，讲解视频：帮你把KMP算法学个通透！（理论篇）_哔哩哔哩_bilibili、帮你把KMP算法学个通透！࿰…...
前端已死？金三银四？你收到offer了吗？
目录 一、前言 二、“唱衰” 三、不局限于框架、前端 四、打动面试官 五、正向加成 六、小结 一、前言 最近在脉脉、知乎等平台都有人在渲染前端从业人员的危机，甚至使用“前端已死”的字眼，颇有“语不惊人死不休”的意味，对老鸟来说&a…...
C生万物 | 十分钟带你学会位段相关知识
结构体相关知识可以先看看这篇文章 —— 链接 一、什么是位段 位段的声明和结构是类似的，有两个不同： 位段的成员必须是 int、unsigned int 或signed int位段的成员名后边有一个冒号和一个数字 在下面，我分别写了一个结构体和一个位段&…...
Spring Boot基础学习之(十):修改员工的信息
注意：spring boot专栏是一个新手项目，博文顺序则是功能实现的流程，如果有看不懂的内容可以到前面系列去了解。 本次项目所有能够使用的静态资源可以免费进行下载 静态资源 在本篇代码DAO层将通过Java文件去实现，在这里就不连接数…...
闭关十几天，我完成了我的毕业设计
个人简介 👀个人主页： 前端杂货铺 🙋♂️学习方向： 主攻前端方向，也会涉及到服务端（Node.js） 📃个人状态： 在校大学生一枚，已拿多个前端 offer（…...
认识rust的项目管理工具--cargo
cargo 提供了一系列的工具，从项目的建立、构建到测试、运行直至部署，为 Rust 项目的管理提供尽可能完整的手段。不过，我们无需再手动安装，之前安装 Rust 的时候（用rustup或者vscode加插件的方式安装）&#…...
面试常问的Linux之 I/O 复用
I/O 复用 一、I/O的概念 在Linux系统中，I/O（输入/输出）指的是计算机系统的数据交换过程，包括从外部设备读取数据（输入）和将数据发送到外部设备（输出）。I/O操作是Linux系统中非常重要…...
MySQL-binlog+dump备份还原
目录 🍁binlog日志恢复 🍂binlog介绍 🍂Binlog的用途 🍂开启binary log功能 🍂配置binlog 🍁mysqldump 🍂数据库的导出 🍂数据库的导入 🍁mysqldumpbinlog 🦐…...
互联网络-单级互联网络
1.立方体单级网络 1.定义 立方体单级网络（cube）的名称来源于下图所示的三维立方体结构，如010只能连接到000、011、110，不能直接连接到对角线上的001、100、101、111。 2.例题 1.编号为0、1、2、3、4，…，15的16个处理器，用单级互联网络互联，用Cube0互联函数时，与第10…...
上海亚商投顾：沪指四连阳重回3300点 中字头个股再发力
上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。 市场情绪大小指数今日走势分化，沪指低开后震荡反弹，创业板指盘中跌超1%。中字头个股再度发力&#x…...
LeetCode：150. 逆波兰表达式求值—栈
🍎道阻且长，行则将至。🍓 🌻算法，不如说它是一种思考方式🍀算法专栏： 👉🏻123 一、🌱150. 逆波兰表达式求值 题目描述：给你一个字符串数组 token…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
Python 高效图像帧提取与视频编码：实战指南
Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...
：工厂方法模式、单例模式和生成器模式)
上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中，合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式：工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...