如何创建自己的组件以渲染元素加上图标？
在element-plus中，我们已经拥有图标，例如＆lt; i-mdi-edit /＆gt; < /code>
如何使用这些图标，以便我可以创建自己的组件
＆lt; icon name =“ edit” /＆gt;
，然后我传递了名称属性，以便我可以将图标
ICON组件如下所示；
<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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用“ nofollow noreferrer”>“动态组件” 为此。
例如，在您的情况下，假设您有
nameprop已注册，则可以使用以下内容：edit：既然您提到了元素plus plus，请参见a
You can use dynamic components for that.
For example, in your case, and assuming you have the
nameprop registered, you can use something like: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.