vue3+element-plus动态绑定icon图标

由于管理后台的菜单栏需要后台根据管理员的权限返回菜单列表，此时需要根据后端返回icon名称来动态显示icon。但是element-plus官方文档没有介绍如何动态绑定一个icon，下面记录一下解决element-plus动态绑定icon的方法

1. icon基本使用

vue2版本的element ui框架中，如果我们想要使用官方的icon控件，只需要在html标签的class中添加对应的icon名称就可以显示了：

<i class="el-icon-delete"></i>

但是vue3版本的element-plus框架中 icon 改成组件形式，如果我们想要使用就必须以如下形式：

<Edit style="width: 1em;height: 1em;margin-right: 8px"/>

当然我们还可以结合el-icon组件一起使用：

<el-icon :size="size":color="color">
<Edit />
</el-icon>

element-plus如需要使用icon组件需要自己手动导入：

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

在使用之前需要在main.js或者main.ts中手动导入：

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from'@element-plus/icons-vue'

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

2. icon动态绑定

使用component结合el-icon实现动态绑定icon图标

<el-icon :size='18'color='#333'>
<component :is="icon名称，首字母必须是大写"/>
</el-icon>

3. 其他icon组件

类似的icon还有 vue-icons-plus ，这个组件比较齐全。官方链接：https://vue-icons.com 安装方法如下所示：

yarn add vue-icons-plus
# or
npm install vue-icons-plus --save

接下来就可以使用了：

<script>
import { FaBeer } from"vue-icons-plus/fa";
</script>

<template>
<div>
<FaBeer size='48'color='#333'/>
</div>
</template>

动态绑定方法和element-plus一样，只是没有 el-icon 控件：

<component :is="icon名称，首字母必须是大写"/>