vue3+ts+vite 项目引入svg icon图标

平时开发项目中多半是直接用阿里巴巴的iconfont字体图标库，那么svg  图标怎么使用了？

1、安装`vite-plugin-svg-icons`

npm i vite-plugin-svg-icons -D

2、配置vite.config.ts

import { UserConfigExport, ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";


export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "src"),
            },
        },
        plugins: [
            vue(),
            createSvgIconsPlugin({
                iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
                symbolId: "icon-[dir]-[name]",
            }) 
        ],
    };
};

3、修改main.ts文件