vue3+vite 引用svg图标

页面展示效果：

1、安装依赖插件vite-plugin-svg-icons和fast-glob

npm install vite-plugin-svg-icons --save 

npm install fast-glob --save

2、在vite.config.ts文件修改配置

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';

createSvgIconsPlugin({

      // 需要自动导入的 svg 文件目录（可修改）

      iconDirs: [resolve(process.cwd(), "src/svgIcon/svg")],

      // 执行icon name的格式（可修改）

      symbolId: "icon-[name]",

    })

 

3、封装svg-icon图标

在src目录下面创建svgIcon文件夹，svg文件夹下放.svg图片；index.vue封装svg-icon组件；

 

 3、在main.ts文件引用

import svgIcon from '@/svgIcon/index.vue'
import "virtual:svg-icons-register";
app.component('svg-icon',svgIcon)

import { createApp } from 'vue'
import App from './App.vue'
import svgIcon from '@/svgIcon/index.vue'
import "virtual:svg-icons-register";

const app = createApp(App)
app.component('svg-icon',svgIcon)
app.mount('#app')

4、.vue文件引用组件

        class="logo"

        name="vue"

      >

 

 

填坑：svg-icon图标无法修改颜色问题；

svg图片里面固定设置fill属性；将fill属性都删除掉