element-plus 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.js
   const 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>