From 70495e0a22469e3c3352a3796341b4539f2b243b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 9 Sep 2022 15:21:50 +0200
Subject: [PATCH] chore: use `nuxt-icon`

---
 docs/app.vue                                  |  2 +-
 docs/pages/components/[component].vue         |  3 --
 src/module.ts                                 |  1 +
 src/runtime/components/elements/Button.vue    |  1 -
 src/runtime/components/elements/Dropdown.vue  |  1 -
 src/runtime/components/elements/Icon.vue      | 40 -------------------
 src/runtime/components/feedback/Alert.vue     |  1 -
 .../components/feedback/AlertDialog.vue       |  1 -
 src/runtime/components/forms/Input.vue        |  1 -
 src/runtime/components/forms/Select.vue       |  1 -
 src/runtime/components/forms/SelectCustom.vue |  1 -
 src/runtime/components/forms/Toggle.vue       |  1 -
 .../components/navigation/CommandPalette.vue  |  1 -
 .../navigation/CommandPaletteGroup.vue        |  1 -
 .../navigation/VerticalNavigation.vue         |  1 -
 .../components/overlays/Notification.vue      |  1 -
 16 files changed, 2 insertions(+), 56 deletions(-)
 delete mode 100644 src/runtime/components/elements/Icon.vue

diff --git a/docs/app.vue b/docs/app.vue
index 856d789f..58f60b1d 100644
--- a/docs/app.vue
+++ b/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: 'Icon', to: '/components/Icon' }] },
+  { 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: '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' }] },
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index f9940180..08353c61 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -205,9 +205,6 @@ const defaultProps = {
       commands: people
     }]
   },
-  Icon: {
-    name: 'heroicons-outline:bell'
-  },
   Input: {
     name: 'input',
     placeholder: 'Enter text'
diff --git a/src/module.ts b/src/module.ts
index d5574635..c68c29a7 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -116,6 +116,7 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
+    await installModule('nuxt-icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installModule('@nuxtjs/tailwindcss', {
       viewer: false,
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 0523fd83..5ac20b31 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -17,7 +17,6 @@ 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'
 
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index 45967d12..6e8cf579 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -50,7 +50,6 @@ 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'
diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
deleted file mode 100644
index ca8f782b..00000000
--- a/src/runtime/components/elements/Icon.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<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>
diff --git a/src/runtime/components/feedback/Alert.vue b/src/runtime/components/feedback/Alert.vue
index b6d8ccf2..149f1842 100644
--- a/src/runtime/components/feedback/Alert.vue
+++ b/src/runtime/components/feedback/Alert.vue
@@ -27,7 +27,6 @@
 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: {
diff --git a/src/runtime/components/feedback/AlertDialog.vue b/src/runtime/components/feedback/AlertDialog.vue
index 6fa05828..871133e3 100644
--- a/src/runtime/components/feedback/AlertDialog.vue
+++ b/src/runtime/components/feedback/AlertDialog.vue
@@ -25,7 +25,6 @@ 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({
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 76445e3d..bf6224ef 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -30,7 +30,6 @@
 <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'
 
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 7ef78281..eea6a2ff 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -45,7 +45,6 @@
 <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'
 
diff --git a/src/runtime/components/forms/SelectCustom.vue b/src/runtime/components/forms/SelectCustom.vue
index 1e522802..53afb860 100644
--- a/src/runtime/components/forms/SelectCustom.vue
+++ b/src/runtime/components/forms/SelectCustom.vue
@@ -91,7 +91,6 @@ import {
   ComboboxOption,
   ComboboxInput
 } from '@headlessui/vue'
-import Icon from '../elements/Icon.vue'
 import { classNames, usePopper } from '../../utils'
 import $ui from '#build/ui'
 
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 18d43323..e135aa77 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -17,7 +17,6 @@
 <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({
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index eb7e9d70..7c1b85a5 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -46,7 +46,6 @@ 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'
 
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index 3124f68d..a184d1ba 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -51,7 +51,6 @@
 <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'
 
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 66ea61a9..01d01700 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -39,7 +39,6 @@
 
 <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'
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index e169af2c..3f1192e4 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -61,7 +61,6 @@
 <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'