Vite2 + Vue3添加svg的使用并通过svg实现自定义Icon组件

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

yarn add vite-plugin-svg-icons -D 

或

npm i vite-plugin-svg-icons -D

2、安装glob

不安装会提示Error: Cannot find module 'fast-glob'

yarn add fast-glob -D

或

npm install fast-glob -D

3、配置vite.config.ts

3.1 iconDirs所有的 svg的文件都存放在该文件夹下

3.2 symbolId指定use标签中href格式

导出名为createSvgIconsPlugin并加大括号，不然会提示TypeError: (0 , import_vite_plugin_svg_icons.default) is not a function

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

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/svg')],
      // 执行icon name的格式
      symbolId: 'icon-[name]',
    })
  ]
});

3、在main.ts注册脚本

import 'virtual:svg-icons-register'; // 引入svg icon注册脚本

4、通过svg实现Icon组件

5、引用自定义Icon组件

---