How to create my own component to render icons in element-plus?

Question

In element-plus we already have icons for example <i-mdi-edit />

how can use these icons so i can create my own component

<Icon name="edit" />

and i pass the name property so i can get the icon

my Icon component as follows;

<script setup lang="ts">
import { ref } from "vue";

let props = withDefaults(defineProps<{ name: string }>(), {
      name: "edit",
});

let component = ref(`i-mdi-${props.name}`);
</script>

<template>
   <component :is="component" />
</template>

Answer 1

You can use dynamic components for that. For example, in your case, and assuming you have the name prop registered, you can use something like:

<component :is="`i-mdi-${name}`"></component>

Edit: Since you mentioned element plus, here is a working example. However, in this case, it seems a bit redundant to do like you want.