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

简介：vue动态绑定element-plus图标，vue动态绑定vue-icons-plus图标

博客升级vue3时，由于管理后台的菜单栏需要后台根据管理员的权限返回菜单列表，此时需要根据后端返回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名称，首字母必须是大写" />

 

有什么不对的可以在我的公众号留言