浏览器直接引入Element Plus时替换自带的icon

Element Plus的自带ICON太少，经常不够用

在浏览器直接引入Element Plus时，我们可以替换掉自带的ICON，替换后的使用方法不变

1.下载Element Plus自带的icon库源码 GitHub - element-plus/element-plus-icons: Main package for storing Element Plus icon resources.

2.下载后解压到本地目录，在根目录添加  svgtovue.js

import fs from 'fs'
import path from 'path'

const ICON_COMP_PATH = './packages/vue/src/components/'
const SVG_PATH = './packages/svg/'

const files = fs.readdirSync(ICON_COMP_PATH)
files.forEach(file => {
  const filePath = path.join(ICON_COMP_PATH, file)
  fs.unlinkSync(filePath)
})

fs.readdir(SVG_PATH, (err, files) => {
  if (err) {
    return console.error(err)
  }

  // 过滤指定扩展名的文件
  const svgFiles = files.filter(file => file.endsWith('.svg'))
  let indexts = ''

  // 将 svg 转换成 vue 文件
  svgFiles.forEach(file => {
    fs.readFile(SVG_PATH + file, (err, data) => {
      if (err) {
        return console.error(err)
      }
      let template = '<template>\n' + data.toString()

      const filename = file.replace('.svg', '') // 获取文件名
      const vueName = filename.toLowerCase().split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');

      template += `\n</template>\n<script lang="ts" setup>\ndefineOptions({name: "${vueName}",})\n</script>`
      indexts += 'export { default as ${vueName} } from \'./${filename}.vue\'\n'
      fs.writeFile(
        `${ICON_COMP_PATH}/${filename}.vue`,
        template,
        err => {
          if (err) {
            return console.error(filename + '转换失败', err)
          }

          console.log(filename + '转换成功')
        }
      )
    })
  })

  svgFiles.forEach(file => {
    const filename = file.replace('.svg', '') // 获取文件名
    const vueName = filename.toLowerCase().split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
    indexts += `export { default as ${vueName} } from \'./${filename}.vue\'\n`
  })
  fs.writeFile(`${ICON_COMP_PATH}/index.ts`, indexts, err => {
    if (err) {
      return console.error('生成ts失败')
    }
  })
})

3.把你自己准备的图标svg文件放入  packages/svg  目录，目录中原有的文件为自带图标的SVG文件，按自己需求进行添加、删除

4.按顺序运行以下命令

pnpm format
node svgtovue.js
pnpm build

5.生成的图标库路径为：  packages/vue/dist

浏览器直接引入时，引入 index.iife.js  或  index.iife.min.js  就可以了，使用方法跟Element Plus文档中一样