element-plus踩坑之使用＜el-icon＞＜Menu /＞＜/el-icon＞加载不出且内存一直持续飙升

前言

又又又踩坑了，vue+element-plus使用<el-icon><Menu /></el-icon>导致加载不出页面且内存一直持续飙升！

一、问题描述

在Vue中使用element-plus且全局注册了icon，使用其他图标正常，使用Menu图标后加载不出页面且内存一直持续飙升！

二、原因分析以及解决办法

1.原因分析

通过中关于图标的说明可知：是由于Menu命名冲突引起的，此已有人提交，但截至目前（2022-06-26）尚未修复，官方建议通过设置图标别名进行规避。

2.解决办法

在main.js中修改全局引入图标的方法，代码如下：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'


const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // 新增名为Menu的判断
  if ("Menu"!= key){
    app.component(key, component);
  }
  else{
    app.component(key + "Icon", component);
  }

再使用该名为Menu的图标时，使用如下名称引用即可！

<el-icon><MenuIcon /></el-icon>

 成功显示！