一、 相关配置
- 引入依赖
npm install vite-plugin-svg-icons -D^C
- 配置vite.config.js
主要内容： createSvgIconsPlugin
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1. 使用@符代替 ./src 下载依赖： npm install path npm i @types/node -D
import path,{ resolve } from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),// 注册所有的svg文件生成svg雪碧图createSvgIconsPlugin({iconDirs: [path.resolve(__dirname, 'src/icons/svg')], // 指定存放 SVG 的文件夹symbolId: "icon-[name]", // 设置 Symbol 的 ID 规则})],// 1.使用@符代替 ./srcresolve: {alias: {'@': resolve(__dirname, './src'),}
},
})
- main.ts中引入
import "virtual:svg-icons-register";
注意：如果报错没有 fast-glob包, 安装命令 npm install fast-glob -D
二、 item.vue 组件：显示菜单icon+title
<template><!-- Render the icon if it's provided --><svg-icon v-if="props.icon" :icon-class="props.icon" class="sub-el-icon"/><!-- Render the title if it's provided --><span v-if="props.title">{{ props.title }}</span>
</template>
<script setup lang="ts">import { defineProps } from 'vue'import SvgIcon from '@/components/SvgIcon/index.vue'const props = defineProps({icon: {type: String,default: ''},title: {type: String,default: ''}})console.log(props.icon)
</script><style scoped>.sub-el-icon {color: currentColor;width: 1em;height: 1em;}
</style>
三、 SvgIcon.vue :图标组件
<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="`#icon-${props.iconClass}`"></use></svg>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({iconClass: {type: String,default: ''},className: {type: String,default: ''}
})
const svgClass = `svg-icon ${props.className}`
</script>
<style lang="scss" scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
四、icon信息存储文件
src/
├── components/
│ └── SvgIcon/
│ └── index.vue # SvgIcon 组件
├── icons/
│ ├── index.js # 注册逻辑
│ └── svg/ # 存放所有 SVG 文件
│ ├── home.svg
│ ├── user.svg
│ └── …
index.js
import SvgIcon from '@/components/SvgIcon/index.vue'export default function registerSvgIcon(app) {app.component('svg-icon', SvgIcon)// 动态引入所有 svg 文件const modules = import.meta.glob('./svg/*.svg', { eager: true });// 遍历加载所有模块Object.keys(modules);
}
五、在main.ts中引入
// icon
import registerSvgIcons from '@/icons/index'
// 注册SVG图标
registerSvgIcons(app)
