vite+vue3 使用svg icon(包括element-plus icon)

1、安装依赖

npm i @element-plus/icons-vue -S
npm i vite-plugin-svg-icons -D

2、在vite.config.ts文件中

import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // 版本不同引入方式不同
export default defineConfig({
  ...
  plugins: [
    ...
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ]
});

且按照iconDirs中路径准备好svg文件

image.png

3、创建引入全部element-plus文件，以及创建SvgIcon组件

在components文件夹下创建如下文件

image.png

components/SvgIcon/svgicon.ts文件内容如下

// 注册所有 @element-plus/icons-vue 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { App } from 'vue';
export default {
  install: (app: App) => {
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component);
    }
  }
};

components/SvgIcon/index.vue文件内容如下

// 注册自定义图标

4、在main.ts中引入

// 注册所有图标
import 'virtual:svg-icons-register';  // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue';
import elementIcons from '@/components/SvgIcon/svgicon';
app.component('SvgIcon', SvgIcon);
app.use(elementIcons);

5、使用方法

// 自定义的svg图标


// element-plus图标