vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）

前言

1、你是否遇到UI给你切双份icon图（正常显示颜色、高亮显示颜色）？我们前端小伙伴还得做交互引入两个图片，以后修改颜色又要换？好麻烦呀~~~
2、是否遇到有时候下载svg下来，想随意更改颜色遇到瓶颈？

本来懒人开发原则，还是弄好配置，后面想怎么改就怎么改！！

其他配置参考：vue3 + vue-cli3/4配置svg文件的全局使用

全局配置svg步骤

1、安装插件

yarn add vite-plugin-svg-icons -D

还需要安装一个依赖的插件：yarn add fast-glob -D

vite-plugin-svg-icons用于生成 svg 雪碧图。

官网配置文档：https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md

特征：

• 预加载 在项目运行时就生成所有图标,只需操作一次 dom
• 高性能 内置缓存,仅当文件被修改时才会重新生成

做笔记时安装的依赖包版本为 ：

"fast-glob": "^3.2.11",
"vite-plugin-svg-icons": "^2.0.1"

2、配置插件 vite.config.js

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 引入svg插件
import {
    createSvgIconsPlugin } from 'vite-plugin-svg-icons'

const pathResolve = (pathStr) => {
   
  return path.resolve(__dirname, pathStr)
}

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue(),
    createSvgIconsPlugin({
   
      // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹下
      // iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
      // 或
      iconDirs: [pathResolve('./src/assets/svgs')],
      // 指定symbolId格式（这里的配置与6.2步骤中的引入svg组件的name配置项写法有关）
      symbolId: 'icon-[dir]-[name]',
    }