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…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...