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文件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";


//svg插件需要配置代码
import "virtual:svg-icons-register";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

const app = createApp(App);
app.use(ElementPlus).mount("#app");

4、在项目文件夹src/assets/icons文件夹下添加.svg图标文件，svg我们可以在阿里巴巴图标库复制

 

注意文件路径要与vite.config.ts中    iconDirs: [path.resolve(process.cwd(), "src/assets/icons")]保持一致

 5、组件中使用svg

 <template>
  <svg style="width:100px; height:100px">
    <use xlink:href="#icon-home" fill="red"></use>
  </svg>
</template>

如果修改fill图标颜色失效，打开对应的.svg文件 找到`fill="#d4237a"`将其删除即可