如何在Element-Plus中创建图标的动态列表

Question

如何仅从数组中打印图标列表，

例如[{name：“ edit”}，{name：“ settings”}]

，我得到

<i-mdi-edit />
<i-mdi-settings />

并在浏览器中确实呈现了所需的图标

Answer 1

我使用了动态组件

<script setup lang="ts">

import {reactive} from 'vue'

let items = reactive([{ name: "edit" }, { name: "settings" }])

</script>

<template>

    <component 
       v-for="(item, i) in items"
       :key="i"
       :is="`i-mdi-${item.name}`"
    >
    </component>

</template>