招商银行：北京 M+6 级会员及以上可以领 10 元消费红包
https://cmbt.cn/A41EcU8FY

https://codesandbox.io/s/magical-carson-n6540i?file=/src/Icon.vue

Icon.vue

<script lang="ts">
import { defineComponent, computed, defineAsyncComponent } from "vue";

export default defineComponent({
props: ["icon"],
setup(props) {
const iconCompoent = computed(() => {
return defineAsyncComponent(async () => {
return (await import("@vicons/ionicons5"))[props.icon];
});
});
return {
iconCompoent,
};
},
});
</script>

<template>
<n-icon :component="iconCompoent" />
</template>


使用


Demo.vue

<template>
<Icon icon="GameController" />
<Icon icon="GameController" size="40" color="#0e7a0d" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Icon from "./Icon.vue";
export default defineComponent({
components: {
Icon,
},
});
</script>