Vue3 Element Plus 动态渲染 ＜el-icon＞

1. 动态渲染 ＜el-icon＞

   这里需要用到compnent来实现，例示代码如下：

<template>
  <div>
	<h1>动态渲染 el-icon </h1>
    <el-icon v-for="icon in list" :size='36'>
		<component :is="icon" />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const list = reactive(['Plus', 'Minus', 'Search', 'Female', 'Male', 'Aim'])

</script>
<style lang="scss" scoped>

</style>

main.ts中全局注册图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

//全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

2.按需加载图标

如果不想全局注册图标，可以按以下方式处理：

<template>
  <div>
	<h1>动态渲染 el-icon </h1>
    <el-icon v-for="icon in list" :size='36'>
		<component :is="icon" />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { reactive, markRaw } from 'vue'
//只导入需要的图标
import { Plus, Minus, Search, Female, Male, Aim } from '@element-plus/icons-vue'

const list = reactive([markRaw(Plus), markRaw(Minus), markRaw(Search), markRaw(Female), markRaw(Male), markRaw(Aim) ])

</script>
<style lang="scss" scoped>

</style>

3.效果