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

Vue—— Vue3 SVG 图标系统设计与实现

news 2026/5/12 16:59:22

背景问题：
需要统一管理项目中的图标资源。

方案思考：
使用 SVG 图标系统，便于管理和使用。

具体实现：
首先安装必要的依赖：

npminstallvite-plugin-svg-icons

配置 Vite 插件：

// vite.config.jsimport{defineConfig}from'vite'import{createSvgIconsPlugin}from'vite-plugin-svg-icons'importpathfrom'path'exportdefaultdefineConfig({plugins:[createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],// 指定symbolId格式symbolId:'icon-[dir]-[name]',})],})

创建 SVG 图标组件：

<!-- components/SvgIcon.vue --> <template> <svg :class="svgClass" aria-hidden="true" v-on="$attrs"> <use :href="iconName" :fill="color" /> </svg> </template> <script setup> import { computed } from 'vue' const props = defineProps({ name: { type: String, required: true }, color: { type: String, default: '#333' }, className: { type: String, default: '' } }) const iconName = computed(() => `#icon-${props.name}`) const svgClass = computed(() => { if (props.className) { return `svg-icon ${props.className}` } return 'svg-icon' }) </script> <style scoped> .svg-icon { width: 1em; height: 1em; position: relative; fill: currentColor; vertical-align: -2px; } </style>

在 main.js 中注册插件：

// main.jsimport{createApp}from'vue'import{register}from'vite-plugin-svg-icons/client'constapp=createApp(App)// 注册 SVG 图标register(app)

使用示例：

<template> <div class="icon-demo"> <SvgIcon name="home" /> <SvgIcon name="user" /> <SvgIcon name="setting" /> <SvgIcon name="search" color="#409EFF" /> </div> </template> <script setup> import SvgIcon from '@/components/SvgIcon.vue' </script>

完整的图标文件结构：

src/ assets/ icons/ home.svg user.svg setting.svg search.svg

其中 SVG 文件示例：

<!-- src/assets/icons/home.svg --><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 1024 1024"><pathd="M1024 512c0 282.77-229.23 512-512 512S0 794.77 0 512 229.23 0 512 0s512 229.23 512 512z"fill="#2c2c2c"/></svg>