vue3+element-plus时，icon图标不显示的解决办法

最近在做vue3+element-plus时，升级了element-plus之后，发现所有button的图标都显示不了，但是还是存在占位，代码如下：el-icon-edit不显示。

<el-button type="primary" icon="el-icon-edit">编辑</el-button>

原因应该是升级了element-plus，找了半天，解决办法如下：

npm安装：

npm install @element-plus/icons-vue

main.js:

全局引入——注册所有图标：

// main.js:注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

按需引入：

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
// 如果是vue3非setup情况，还需要注册
components: {
Search,
Edit,
Delete
},

template使用

// template
 <el-button type="primary">
   <el-icon>
     <edit />
   </el-icon>
   <span> 新增 </span>
 </el-button>

或者这样使用：

<el-button type="primary" icon="Search">
  搜索
</el-button>
<el-button type="primary" icon="Edit">
  新增
</el-button>

上面两种方式，页面均正常显示：

当然，还有个办法，就是回到旧版本。