how to create a dynamic list of icons in Element-plus

Question

How to print a list of icons just from an array

for example [{ name: "edit" }, { name: "settings" }]

and i get

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

and in the browser it really renders the wanted icon

Answer 1

i used dynamic components

<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>