Vue3+Vite+Js项目搭建之九：SvgIcon.vue 组件构建

效果：

 

在 components 下构建 SvgIcon.vue 组件

在 vite.config.js 中配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定缓存文件
      iconDirs: [resolve(process.cwd(), "src/assets/svg")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    }),
  ],
});

将.svg 文件存放在 assets -> svg 下

在 main.js 中引入组件

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router/index.js";
// 引入css
import "./assets/style/index.scss";
// svg 组件
import GiSvgIcon from "@/components/SvgIcon.vue";
import "virtual:svg-icons-register";

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.component("svg-icon", GiSvgIcon);
app.mount("#app");

 在组件中使用 svg-icon

解决 color 属性不生效：在 vscode 中，点开 .svg 文件 找到所有 fill="" 属性，然后删除就可以了。

一般我是在 阿里巴巴 找需要用的icon，里面挺全的。