mirror of
https://github.com/hay-kot/homebox.git
synced 2024-12-22 14:56:31 +00:00
32 lines
801 B
Vue
32 lines
801 B
Vue
|
<script setup lang="ts">
|
||
|
|
import type { Ref } from 'vue';
|
||
|
|
import type { IconifyIcon } from '@iconify/vue';
|
||
|
|
import { Icon as Iconify, loadIcon } from '@iconify/vue';
|
||
|
|
|
||
|
|
const nuxtApp = useNuxtApp();
|
||
|
|
const props = defineProps({
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const icon: Ref<IconifyIcon | null> = ref(null);
|
||
|
|
const component = computed(() => nuxtApp.vueApp.component(props.name));
|
||
|
|
|
||
|
|
icon.value = await loadIcon(props.name).catch(_ => null);
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.name,
|
||
|
|
async () => {
|
||
|
|
icon.value = await loadIcon(props.name).catch(_ => null);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Iconify v-if="icon" :icon="icon" class="inline-block w-5 h-5" />
|
||
|
|
<Component :is="component" v-else-if="component" />
|
||
|
|
<span v-else>{{ name }}</span>
|
||
|
|
</template>
|