关于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.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>