如何在vue2+webpack项目中使用svgIcon？参考：手摸手，带你优雅的使用 icon - 掘金

这篇文章主要介绍如何在vue3项目中优雅的使用图标

1、通过 vite-plugin-svg-icons 插件封装SvgIcon组件

npm i vite-plugin-svg-icons -D

2、配置 vite.config.ts

//插件引入
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'plugins: [vue(),Components({// UI库resolvers: [ArcoResolver()],}),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],// 指定symbolId格式symbolId: "icon-[dir]-[name]",/*** 自定义插入位置* @default: body-last*/// inject?: 'body-last' | 'body-first'/*** custom dom id* @default: __svg__icons__dom__*/// customDomId: '__svg__icons__dom__',}),],

3、配置 tsconfig.json

如果你使用的 Typescript, 可以在 tsconfig.json 配置文件中添加

// tsconfig.json
{"compilerOptions": {"types": ["vite-plugin-svg-icons/client"]}
}

4、封装SvgIcon组件 src/components/SvgIcon

<template><svg aria-hidden="true"><use :href="symbolId" :fill="color" /></svg>
</template><script>
import { defineComponent, computed } from 'vue'export default defineComponent({name: 'SvgIcon',props: {prefix: {type: String,default: 'icon',},name: {type: String,required: true,},color: {type: String,default: '#333',},},setup(props) {const symbolId = computed(() => `#${props.prefix}-${props.name}`)return { symbolId }},
})
</script>

5、同文件夹下创建 index.ts

import { App } from "vue";
import SvgIcon from "./SvgIcon";
import "virtual:svg-icons-register";const svgIconPlugin = {install(app: App): void {// 全局挂载app.component("svg-icon", SvgIcon);},
};export default svgIconPlugin;

6、全局注册 main.ts

import { createApp } from "vue";
import App from "./App.vue";import router from "./router/router";// svg封装插件
import svgIcon from "@/components/svgIcon";createApp(App).use(router).use(svgIcon)              .mount("#app");

7、组件中使用 

// 只需name绑定成icons目录下的svg文件名即可<svg-icon name="heSuan" />