Vue3 element-plus动态Icon图标解决方法

效果展示：

图标名称则在官网列举的这一堆：

先按照官网上的说明安装

Icon 图标 | Element Plus (element-plus.org)

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

然后在main.js或者main.ts中写上

import * as Icons from '@element-plus/icons-vue'
app.config.globalProperties.$icon = Icons

这样就设置了一个全局变量

在组件中使用

<script setup>
import { RouterView } from 'vue-router'
let myIcon = 'View'; //假设这里是后端传回的icon字符串
</script>

<template>
  <el-icon>
    <component :is="$icon[myIcon]" />
  </el-icon>
  <RouterView />
</template>

<style scoped>
</style>