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

vue23自定义svg图标组件

news 2025/6/19 19:27:30

可参考：
未来必热：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图标。但是，…...

编程日记 2023/4/22 17:06:04

相机雷达时间同步（基于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…...

编程日记 2023/5/9 23:10:06

素数环PrimeRing [3*]

目录素数环PrimeRing [3*] 程序设计程序分析素数环PrimeRing [3*] 把1~N这N个整数摆成一个环，要求任意相邻两个数的和为素数。按字典序打印出以1开始的素数环 Input 一个整数N (<=10) Output 每行一个素数环。每个数之间用一个空格隔开。无解输出 No Solution Sampl…...

编程日记 2023/5/22 1:09:35

mongodb 连接池配置

参考官方描述： 如果spring使用以下mongodb的配置，则默认是没有连接池的 spring:data:mongodb:host: 地址port: 27017database: 数据库名username: 账号password: 密码每隔一两分钟没有去请求的话就会断开连接重连，每次都要等待5-10秒之间才…...

编程日记 2023/5/8 16:33:05

数据在内存中的存储（深度剖析）

目录 1.数据类型介绍 1.1类型分类 2.整形在内存中的存储 2.1原码，反码，补码 2.2大小端介绍 2.3练习 3.浮点型在内存中的存储 3.1浮点数存储规则引入： 有正负的数据可以存放在有符号的变量中只有正数的数据可以存放在无符号的变量…...

编程日记 2023/5/25 5:48:29

python 实现二叉搜索树的方法有哪些？

树的介绍树不同于链表或哈希表，是一种非线性数据结构，树分为二叉树、二叉搜索树、B树、B树、红黑树等等。树是一种数据结构，它是由n个有限节点组成的一个具有层次关系的集合。用图片来表示的话，可以看到它很像一棵倒挂着的树。…...

编程日记 2023/5/18 7:33:36

ORM概述

1_ORM概述[理解] 解释: 对象关系映射模型特点: 1.将类名,属性, 映射成数据库的表名和字段2.类的对象,会映射成为数据库表中的一行一行的数据优缺点: 优点: 1.不再需要编写sql语句2.不再关心使用的是什么数据库了缺点: 1.由于不是直接通过sql操作数据库,所以有性能损失 2_…...

编程日记 2023/5/12 8:42:23

程序员必知必会7种UML图（类图、序列图、组件图、部署图、用例图、状态图和活动图）画法盘点

众所周知，软件开发是一个分阶段进行的过程。不同的开发阶段需要使用不同的模型图来描述业务场景和设计思路，在不同的阶段输出不同的设计文档也是必不可少的，例如，在需求分析阶段需要输出领域模型和业务模型，在架构阶段…...

编程日记 2023/5/13 20:47:31

基于asp的搜索引擎开发和实现

随着因特网的迅猛发展、WEB信息的增加，用户要在信息海洋里查找信息，就像大海捞针一样，搜索引擎技术恰好解决了这一难题。目前，搜索引擎系统可以分类三大类，分别是：目录式搜索引擎：以人工方式或半…...

编程日记 2023/5/13 2:11:31

代码随想录刷题-字符串-实现 strStr()

文章目录实现 strStr()习题暴力解法kmp 解法实现 strStr() 本节对应代码随想录中：代码随想录，讲解视频：帮你把KMP算法学个通透！（理论篇）_哔哩哔哩_bilibili、帮你把KMP算法学个通透！&#xff0…...

编程日记 2023/5/29 5:21:19

前端已死？金三银四？你收到offer了吗？

目录一、前言二、“唱衰” 三、不局限于框架、前端四、打动面试官五、正向加成六、小结一、前言最近在脉脉、知乎等平台都有人在渲染前端从业人员的危机，甚至使用“前端已死”的字眼，颇有“语不惊人死不休”的意味，对老鸟来说&a…...

编程日记 2023/5/14 6:25:29

C生万物 | 十分钟带你学会位段相关知识

结构体相关知识可以先看看这篇文章 —— 链接一、什么是位段位段的声明和结构是类似的，有两个不同： 位段的成员必须是 int、unsigned int 或signed int位段的成员名后边有一个冒号和一个数字在下面，我分别写了一个结构体和一个位段&…...

编程日记 2023/5/11 13:52:20

Spring Boot基础学习之(十):修改员工的信息

注意：spring boot专栏是一个新手项目，博文顺序则是功能实现的流程，如果有看不懂的内容可以到前面系列去了解。本次项目所有能够使用的静态资源可以免费进行下载静态资源在本篇代码DAO层将通过Java文件去实现，在这里就不连接数…...

编程日记 2023/5/31 13:43:45

闭关十几天，我完成了我的毕业设计

个人简介 👀个人主页： 前端杂货铺 🙋‍♂️学习方向： 主攻前端方向，也会涉及到服务端（Node.js） 📃个人状态： 在校大学生一枚，已拿多个前端 offer（…...

编程日记 2023/5/27 14:02:44

认识rust的项目管理工具--cargo

cargo 提供了一系列的工具，从项目的建立、构建到测试、运行直至部署，为 Rust 项目的管理提供尽可能完整的手段。不过，我们无需再手动安装，之前安装 Rust 的时候（用rustup或者vscode加插件的方式安装）&#…...

编程日记 2023/5/22 1:11:57

面试常问的Linux之 I/O 复用

I/O 复用一、I/O的概念在Linux系统中，I/O（输入/输出）指的是计算机系统的数据交换过程，包括从外部设备读取数据（输入）和将数据发送到外部设备（输出）。I/O操作是Linux系统中非常重要…...

编程日记 2023/5/31 22:02:13

MySQL-binlog+dump备份还原

目录 🍁binlog日志恢复 🍂binlog介绍 🍂Binlog的用途 🍂开启binary log功能 🍂配置binlog 🍁mysqldump 🍂数据库的导出 🍂数据库的导入 🍁mysqldumpbinlog 🦐…...

编程日记 2023/5/28 18:22:04

互联网络-单级互联网络

1.立方体单级网络 1.定义立方体单级网络（cube）的名称来源于下图所示的三维立方体结构，如010只能连接到000、011、110，不能直接连接到对角线上的001、100、101、111。 2.例题 1.编号为0、1、2、3、4，…，15的16个处理器，用单级互联网络互联，用Cube0互联函数时，与第10…...

编程日记 2023/5/31 13:44:50

上海亚商投顾：沪指四连阳重回3300点中字头个股再发力

上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。市场情绪大小指数今日走势分化，沪指低开后震荡反弹，创业板指盘中跌超1%。中字头个股再度发力&#x…...

编程日记 2023/5/27 16:05:16

LeetCode：150. 逆波兰表达式求值—栈

🍎道阻且长，行则将至。🍓 🌻算法，不如说它是一种思考方式🍀算法专栏： 👉🏻123 一、🌱150. 逆波兰表达式求值题目描述：给你一个字符串数组 token…...

编程日记 2023/5/12 19:04:39

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/6/15 20:37:19

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/6/17 17:52:51