关于vue3:elementplus-Icon图标统一导入及注册

element-plus官网提醒，Icon图标正在向SVG Icon迁徙，之前应用的Font Icon行将被弃用。

1. 装置

   $ yarn add @element-plus/icons# 或者$ npm install @element-plus/icons

2. 根底应用

   在须要加载图标的页面内按需引入所需图标。（ps:这里官网文档并没有具体阐明）

   <template>  <el-icon>    <setting />  </el-icon></template><script setup lang="ts">import { Setting } from '@element-plus/icons'</script>

3. 对立导入并注册

   //main.ts文件import * as ElIconModules from '@element-plus/icons'const app = createApp(App)// 对立注册Icon图标for (const iconName in ElIconModules) {  if (Reflect.has(ElIconModules, iconName)) {    const item = ElIconModules[iconName]    app.component(iconName, item)  }}

   ps:应用ts，当数组下标为字符串时，会报错。
   
   解决办法：在tsconfig.json内增加如下规定：

   "suppressImplicitAnyIndexErrors": true

4. 在组件中间接应用
   
   点击图标，复制相应的icon，粘贴到要加载的地位，间接应用。

   <el-icon><alarm-clock /></el-icon>

5. 动静应用
   例如：想要在el-menu组件中动静应用Icon图标，应用动静组件<component :is="***" />即可实现。

   // router.jsconst routes = [  {    path: '/dashboard',    component: Layout,    meta: {      title: '首页',      icon: 'HomeFilled'    },    children: []  }]

   // MenuItem.vue<template>  <template v-for="menu in menuList" :key="menu.path">    <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.path">      <template #title>        <el-icon>          <component :is="menu.meta.icon" />        </el-icon>        <span>{{ menu.meta.title }}</span>      </template>      <menu-item :menu-list="menu.children"></menu-item>    </el-sub-menu>    <el-menu-item v-else :index="menu.path" style="color: #f4f5f5">      <el-icon>        <component :is="menu.meta.icon" />      </el-icon>      <template #title>{{ menu.meta.title }}</template>    </el-menu-item>  </template></template>