批量引入svg方案

1. webpack批量导出

核心代码：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

// 通过node的require批量导出
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

2.vite批量导出

深度遍历读取文件夹下的svg文件，然后处理封装成一个数组对象。
利用vite提供的transformIndexHtml钩子函数读取到html源文件，并将svg标签插入到html的body中。

/src/icons/index.js

import {
    readFileSync, readdirSync } from 'fs'

// id 前缀
let idPerfix = ''

// 识别svg标签的属性
const svgTitle =