move to nuxt

frontend/components/Icon.vue

@@ -0,0 +1,31 @@
+<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>