【vue3 TypeScript 使用 element-plus的icons组件注册】

element-plus的icon是以组件的形式使用的,需要在用到的页面单独引入注册的,如果一个页面要用到很多的icon,而且大多数页面都需要用到icon,这样的情况下单独引入就显得不那么友好友好了,这样我们就需要批量注册了
(如下代码拿来直接可以用)

第一步

创建ts文件内容如下
import * as icons from "@element-plus/icons"
const importFn = require.context('./', true, /\.vue$/)
export default {
  install(app: any) {
    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })

    addComponents(app)
  }
}
// element icon 组件注册
function addComponents(APP: any) {
  let EL_ICON_OBJ: any = {
    ...icons
  }
  for (const key in EL_ICON_OBJ) {
    let component = getValue(key)
    APP.component(key, component)
  }
  function getValue(arg: keyof typeof EL_ICON_OBJ) {
    return EL_ICON_OBJ[arg]
  }
}

第二步

main.ts文件内引入
import UI from '@/components/index'
APP.use(UI)