homebox/frontend/components/Icon.vue
2022-09-04 16:41:12 -08:00

31 lines
793 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" />
<Component :is="component" v-else-if="component" />
<span v-else>{{ name }}</span>
</template>