Element-Plus-动态渲染 ICON

1、动态渲染 ICON

1. 前期准备

1. 安装@element-plus/icons-vue

npm install @element-plus/icons-vue

2. 在main.js / main.ts中全局注册所有图标

// main.js or main.ts
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. 具体实现

利用component组件实现动态渲染

<template>
  <el-icon>
    <component :is="iconName" />
  </el-icon>
</template>

<script setup>
import { ref } from 'vue';
// iconName的值 就是官方提供的icon名
const iconName = ref('Plus');
</script>