1.下载svg依赖
pnpm i vite-plugin-svg-icons -D还有一个，下面的不安装可能会报错
pnpm i fast-glob -D2.vite.config.ts配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
//引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({//TODOplugins: [vue() , createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]'})],//ENDresolve:{alias:{"@":path.resolve(__dirname , "./src"),}}
})
3.main.ts配置
import { createApp } from 'vue'
import App from './App.vue'
//引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
///
//引入element-plus国际化
//忽略当前文件ts类型检测，要不然打包会失败
//@ts-ignore
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'//TODO
//引入svg配置文件
import 'virtual:svg-icons-register'//引入自定义插件对象：注册整个项目全局组件
import globalComponent from '@/components'
createApp(App).use(ElementPlus,{ locale: zhCn }).use(globalComponent).mount('#app')
//END
4.文件夹创建
assets -> icons -> ...svg
assets里面创建icons文件夹，里面放.svg矢量图标（记得去色）
5.SvgIcon组件
components -> SvgIconG -> index.vue
<template><svg :style="{ width , height }"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script setup lang='ts'>
defineProps({name: {type: String,}, width: {type: String,default: '1em'}, height: {type: String,default: '1em'}, color: {type: String,default: '#333'}, prefix: {type: String,default: '#icon-'}
})
</script><style scoped lang="scss"></style>6.自定义注册全局插件
components里面创建index.ts
import SvgIconG from './SvgIconG/index.vue';
import ... from '...';
//全局对象
const allGlobalComponents :any = { SvgIconG , ... }
export default {install(app : any){Object.keys(allGlobalComponents).forEach(key => {app.component(key, allGlobalComponents[key]);})}
}然后在main.ts里面注册就行（方法在上面main.ts里面）
