vue3自动导入自定义svg图标

vue3自动导入自定义svg图标

1. 将所有SVG文件放到src/assets/svg目录下

例如新增一个集合home,就在改目录下创建home文件夹,在home文件夹下新增add.svg文件

• 自动引入

<component>
    <icon-home-add />
</component>

• 手动引入

import add from '~icons/home/add';

2. 配置vite.config.js

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

const { resolve, join } = require('path');

const fs = require('fs');

// 读取svg目录
const pathName = resolve(__dirname, 'src/assets/svg');
let readDir = fs.readdirSync(pathName);
let iconsObj = {};
readDir.forEach((item) => {
  iconsObj[item] = FileSystemIconLoader(`src/assets/svg/${item}`, (svg) => svg.replace(/^<svg /, '<svg fill="currentColor" '));
});

export default ({ mode }) => {
  const config = loadEnv(mode, './');
  return defineConfig({
    plugins: [
      vue(),
      AutoImport({
        dts: false,
        imports: ['vue', 'vue-router', 'pinia'],
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'icon',
            customCollections: readDir,
            enabledCollections: ['ep', ...readDir],
          }),
        ],
      }),
      Components({
        dts: false,
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'icon', // 配置前缀名
            customCollections: readDir, // 自定义SVG文件名称
            enabledCollections: ['ep', ...readDir], // 激活的SVG
          }),
        ],
      }),
      Icons({
        autoInstall: false, // 自动下载
        compiler: 'vue3',
        customCollections: iconsObj, // 配置自定义SVG
      }),
    ],
  });
};