Revert "chore: use nuxt-icon"

This reverts commit 70495e0a22.

docs/app.vue

@@ -70,7 +70,7 @@ const toggleDark = () => {
 
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
-  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }] },
+  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }, { label: 'AlertDialog', to: '/components/AlertDialog' }] },
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },

docs/pages/components/[component].vue

@@ -205,6 +205,9 @@ const defaultProps = {
       commands: people
     }]
   },
+  Icon: {
+    name: 'heroicons-outline:bell'
+  },
   Input: {
     name: 'input',
     placeholder: 'Enter text'

src/module.ts

@@ -116,7 +116,6 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
-    await installModule('nuxt-icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installModule('@nuxtjs/tailwindcss', {
       viewer: false,

src/runtime/components/elements/Button.vue

@@ -17,6 +17,7 @@ import { ref, computed, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
 import NuxtLink from '#app/components/nuxt-link'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 

src/runtime/components/elements/Dropdown.vue

@@ -50,6 +50,7 @@ import type { Ref, PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import NuxtLink from '#app/components/nuxt-link'
+import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
 import { classNames, usePopper } from '../../utils'
 import type { Avatar as AvatarType } from '../../types/avatar'

src/runtime/components/elements/Icon.vue

@@ -0,0 +1,40 @@
+<template>
+  <span v-if="isFetching" />
+  <Iconify v-else-if="icon" :icon="icon" />
+  <Component :is="component" v-else-if="component" />
+  <span v-else>{{ name }}</span>
+</template>
+
+<script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue'
+import { computed, ref, watch } from 'vue'
+import { Icon as Iconify } from '@iconify/vue/dist/offline'
+import { loadIcon } from '@iconify/vue'
+import { useNuxtApp, useState } from '#imports'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+const nuxtApp = useNuxtApp()
+const state = useState('u-icons', () => ({}))
+const isFetching = ref(false)
+const icon = computed<IconifyIcon | null>(() => state.value?.[props.name])
+const component = computed(() => nuxtApp.vueApp.component(props.name))
+const loadIconComponent = async () => {
+  if (component.value) { return }
+  if (!state.value?.[props.name]) {
+    isFetching.value = true
+    state.value[props.name] = await loadIcon(props.name).catch(() => null)
+    isFetching.value = false
+  }
+}
+watch(() => props.name, loadIconComponent)
+!component.value && (await loadIconComponent())
+</script>
+
+<script lang="ts">
+export default { name: 'UIcon' }
+</script>

src/runtime/components/feedback/Alert.vue

@@ -27,6 +27,7 @@
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
+import Icon from '../elements/Icon.vue'
 
 const props = defineProps({
   variant: {

src/runtime/components/feedback/AlertDialog.vue

@@ -25,6 +25,7 @@ import { computed } from 'vue'
 import { DialogTitle, DialogDescription } from '@headlessui/vue'
 import Modal from '../overlays/Modal.vue'
 import Button from '../elements/Button.vue'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/forms/Input.vue

@@ -30,6 +30,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { ref, computed, onMounted } from 'vue'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 

src/runtime/components/forms/Select.vue

@@ -45,6 +45,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { get } from 'lodash-es'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 

src/runtime/components/forms/SelectCustom.vue

@@ -91,6 +91,7 @@ import {
   ComboboxOption,
   ComboboxInput
 } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import { classNames, usePopper } from '../../utils'
 import $ui from '#build/ui'
 

src/runtime/components/forms/Toggle.vue

@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Switch } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/navigation/CommandPalette.vue

@@ -46,6 +46,7 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
+import Icon from '../elements/Icon.vue'
 import Button from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -51,6 +51,7 @@
 <script setup lang="ts">
 import { ComboboxOption } from '@headlessui/vue'
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
 

src/runtime/components/navigation/VerticalNavigation.vue

@@ -39,6 +39,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
 import Link from '../elements/Link.vue'
 import Avatar from '../elements/Avatar.vue'
 import type { Avatar as AvatarType } from '../../types/avatar'

src/runtime/components/overlays/Notification.vue

@@ -61,6 +61,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
 import { useTimer } from '../../composables/useTimer'
 import { classNames } from '../../utils'