1
0
Fork 0
forked from mirrors/homebox
homebox/frontend/components/Icon.vue
Hayden 75c633dcb5
frontend: cleanup
* dummy commit

* cleanup workflows

* setup and run eslint

* add linter to CI

* use eslint for formatting

* reorder rules

* drop editor config
2022-09-09 14:46:53 -08:00

31 lines
795 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>