From ee3352278cf03fdd12f2a4663b403052de3f089a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 17 Feb 2023 12:58:19 +0100
Subject: [PATCH] feat: migrate to `@egoist/tailwindcss-icons`

---
 .github/workflows/ci.yml                      |   4 +-
 docs/app.vue                                  |   6 +-
 docs/nuxt.config.ts                           |   1 +
 docs/pages/components/[component].vue         |  26 +--
 docs/pages/examples.vue                       |  30 ++--
 package.json                                  |   5 +-
 src/module.ts                                 |  12 +-
 src/runtime/components/elements/Button.vue    |   5 +-
 src/runtime/components/elements/Dropdown.vue  |   3 +-
 src/runtime/components/elements/Icon.vue      |  16 ++
 src/runtime/components/feedback/Alert.vue     |  13 +-
 .../components/feedback/AlertDialog.vue       |   5 +-
 src/runtime/components/forms/Input.vue        |   5 +-
 src/runtime/components/forms/Select.vue       |   3 +-
 src/runtime/components/forms/SelectCustom.vue |   5 +-
 src/runtime/components/forms/Toggle.vue       |   5 +-
 .../components/navigation/CommandPalette.vue  |   5 +-
 .../navigation/CommandPaletteGroup.vue        |   6 +-
 .../navigation/VerticalNavigation.vue         |   3 +-
 .../components/overlays/Notification.vue      |   7 +-
 src/runtime/presets/default.ts                |  40 +++--
 yarn.lock                                     | 153 ++++++------------
 22 files changed, 178 insertions(+), 180 deletions(-)
 create mode 100644 src/runtime/components/elements/Icon.vue

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 74e9c980..60c29081 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -41,8 +41,8 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      # - name: Typecheck
-      #   run: yarn typecheck
+      - name: Typecheck
+        run: yarn typecheck
 
       - name: Build
         run: yarn build
diff --git a/docs/app.vue b/docs/app.vue
index cecf0b6e..a0bd8cb9 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -9,11 +9,11 @@
             </NuxtLink>
           </div>
 
-          <div class="flex items-center gap-3">
+          <div class="flex items-center">
             <ColorScheme placeholder="" tag="span">
-              <UButton variant="transparent" :icon="colorMode.value === 'dark' ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark" />
+              <UButton variant="transparent" :icon="colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'" @click="toggleDark" />
             </ColorScheme>
-            <UButton to="https://github.com/nuxtlabs/ui" target="_blank" variant="transparent" icon="fa-brands:github" />
+            <UButton to="https://github.com/nuxtlabs/ui" target="_blank" variant="transparent" icon="i-mdi-github" />
           </div>
         </div>
       </UContainer>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 2f195fe8..24746bfd 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -16,6 +16,7 @@ export default defineNuxtConfig({
     },
     preset: {
     },
+    icons: ['heroicons', 'mdi'],
     tailwindcss: {
       theme: {
         extend: {
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index cedbca4d..79642e92 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -35,7 +35,7 @@
 
           <UButton
             class="absolute top-0 right-0"
-            :icon="copied ? 'heroicons-outline:clipboard-check' : 'heroicons-outline:clipboard-copy'"
+            :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
             variant="transparent"
             size="sm"
             :custom-class="copied ? '!text-green-500' : ''"
@@ -132,7 +132,9 @@ const defaultProps = {
     title: 'A new software update is available. See what’s new in version 2.0.4.'
   },
   AlertDialog: {
-    title: 'Are you sure you want to close this modal?',
+    icon: 'i-heroicons-exclamation-triangle',
+    title: 'Deactivate account',
+    description: 'Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.',
     modelValue: alertDialog,
     'onUpdate:modelValue': (v) => { alertDialog.value = v },
     component: {
@@ -154,21 +156,21 @@ const defaultProps = {
     items: [
       [{
         label: 'Edit',
-        icon: 'heroicons-solid:pencil'
+        icon: 'i-heroicons-pencil-square-20-solid'
       }, {
         label: 'Duplicate',
-        icon: 'heroicons-solid:duplicate'
+        icon: 'i-heroicons-document-duplicate-20-solid'
       }],
       [{
         label: 'Archive',
-        icon: 'heroicons-solid:archive'
+        icon: 'i-heroicons-archive-box-20-solid'
       }, {
         label: 'Move',
-        icon: 'heroicons-solid:external-link'
+        icon: 'i-heroicons-arrow-right-circle-20-solid'
       }],
       [{
         label: 'Delete',
-        icon: 'heroicons-solid:trash'
+        icon: 'i-heroicons-trash-20-solid'
       }]
     ]
   },
@@ -176,22 +178,22 @@ const defaultProps = {
     links: [
       {
         label: 'Home',
-        icon: 'heroicons-outline:home',
+        icon: 'i-heroicons-home',
         to: '/'
       },
       {
         label: 'Examples',
-        icon: 'heroicons-outline:book-open',
+        icon: 'i-heroicons-book-open',
         to: '/examples'
       },
       {
         label: 'Migration',
-        icon: 'heroicons-outline:refresh',
+        icon: 'i-heroicons-arrow-path',
         to: '/migration'
       },
       {
         label: 'External link',
-        icon: 'heroicons-outline:external-link',
+        icon: 'i-heroicons-link',
         to: 'https://google.fr',
         target: '_blank'
       }
@@ -207,7 +209,7 @@ const defaultProps = {
     }]
   },
   Icon: {
-    name: 'heroicons-outline:bell'
+    name: 'i-heroicons-bell'
   },
   Input: {
     name: 'input',
diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index 1ea91054..3ceb42d6 100644
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -26,7 +26,7 @@
         Button:
       </div>
 
-      <UButton variant="primary" icon="heroicons-outline:mail">
+      <UButton variant="primary" icon="i-heroicons-envelope">
         Button text
       </UButton>
     </div>
@@ -43,7 +43,7 @@
       <UModal v-model="isModalOpen" @submit.prevent="onSubmit">
         <div class="sm:flex sm:items-start">
           <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-            <IconCSS name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
+            <UIcon name="i-heroicons-exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
           </div>
           <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
             <h3 class="text-lg leading-6 font-medium u-text-gray-900">
@@ -73,7 +73,7 @@
       </div>
 
       <UDropdown v-slot="{ open }" :items="dropdownItems" placement="bottom-start">
-        <UButton variant="white" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
+        <UButton variant="white" :icon="open ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'" trailing icon-class="transition">
           Open menu!
         </UButton>
       </UDropdown>
@@ -98,7 +98,7 @@
 
       <UPopover wrapper-class="inline-block relative">
         <template #default="{ open }">
-          <UButton variant="secondary" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
+          <UButton variant="secondary" :icon="open ? 'i-heroicons-chevron-up-20-solid-20' : 'i-heroicons-chevron-down-20-solid'" trailing icon-class="transition">
             Open popover!
           </UButton>
         </template>
@@ -117,7 +117,7 @@
       </div>
 
       <UTooltip text="Hello tooltip!" :shortcuts="['⌘', 'G']">
-        <IconCSS name="heroicons-outline:information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
+        <UIcon name="i-heroicons-information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
       </UTooltip>
     </div>
 
@@ -125,7 +125,7 @@
       <div class="font-medium text-sm mb-1 u-text-gray-700">
         Notifications:
       </div>
-      <UButton icon="heroicons-outline:bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
+      <UButton icon="i-heroicons-bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
     </div>
 
     <div>
@@ -174,7 +174,7 @@
       <UCard body-class="flex">
         <div class="flex-1 px-4 py-5 sm:p-6 space-y-3">
           <UFormGroup label="Email" name="email" required>
-            <UInput v-model="form.email" type="email" name="email" required icon="heroicons-outline:mail" />
+            <UInput v-model="form.email" type="email" name="email" required icon="i-heroicons-mail" />
           </UFormGroup>
 
           <UFormGroup label="Description" name="description">
@@ -189,7 +189,7 @@
               placeholder="Select a person"
               text-attribute="name"
               value-attribute="id"
-              icon="heroicons-outline:user"
+              icon="i-heroicons-user"
             />
           </UFormGroup>
 
@@ -198,7 +198,7 @@
           </UFormGroup>
 
           <UFormGroup label="Toggle" name="toggle">
-            <UToggle v-model="form.toggle" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
+            <UToggle v-model="form.toggle" name="toggle" icon-off="i-heroicons-x-mark-20-solid" icon-on="i-heroicons-check-20-solid" />
           </UFormGroup>
 
           <UFormGroup label="Notifications" label-class="text-base font-medium u-text-gray-900" description="How do you prefer to receive notifications?">
@@ -302,27 +302,27 @@ function onSubmit () {
 const dropdownItems = [
   [{
     label: 'Edit',
-    icon: 'heroicons-solid:pencil',
+    icon: 'i-heroicons-pencil-square-20-solid',
     click: (e) => {
       e.preventDefault()
       onClick()
     }
   }, {
     label: 'Duplicate',
-    icon: 'heroicons-solid:duplicate'
+    icon: 'i-heroicons-document-duplicate-20-solid'
   }],
   [{
     label: 'Archive',
-    icon: 'heroicons-solid:archive'
+    icon: 'i-heroicons-archive-box-20-solid'
   }, {
     label: 'Move',
-    icon: 'heroicons-solid:external-link',
+    icon: 'i-heroicons-arrow-right-circle-20-solid',
     to: 'https://www.google.fr',
     target: '_blank'
   }],
   [{
     label: 'Delete',
-    icon: 'heroicons-solid:trash'
+    icon: 'i-heroicons-trash-20-solid'
   }]
 ]
 
@@ -335,7 +335,7 @@ const customDropdownItems = [
   }],
   [{
     label: 'About',
-    icon: 'heroicons-solid:plus',
+    icon: 'i-heroicons-plus-20-solid',
     to: '/about'
   }]
 ]
diff --git a/package.json b/package.json
index 7ef5a4c4..c6bedaa0 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,9 @@
     "release": "yarn lint && standard-version && git push --follow-tags"
   },
   "dependencies": {
+    "@egoist/tailwindcss-icons": "^1.0.3",
     "@headlessui/vue": "^1.7.10",
-    "@iconify/vue": "^4.1.0",
+    "@iconify-json/heroicons": "^1.1.9",
     "@nuxt/kit": "^3.2.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/tailwindcss": "^6.4.0",
@@ -40,10 +41,10 @@
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
-    "nuxt-icon": "^0.3.2",
     "tailwindcss": "^3.2.6"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.1.47",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
diff --git a/src/module.ts b/src/module.ts
index cae86894..cb96fa0f 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -2,6 +2,7 @@ import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, addTe
 import { defu } from 'defu'
 import colors from 'tailwindcss/colors.js'
 import type { Config } from 'tailwindcss'
+import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import { colorsAsRegex, excludeColors } from './runtime/utils/colors'
 import defaultPreset from './runtime/presets/default'
@@ -39,6 +40,8 @@ export interface ModuleOptions {
 
   colors?: ColorsOptions
 
+  icons: string[]
+
   tailwindcss?: Partial<Config>
 }
 
@@ -49,6 +52,7 @@ const defaults = {
     primary: 'indigo',
     gray: 'gray'
   },
+  icons: ['heroicons'],
   tailwindcss: {
     theme: {}
   }
@@ -72,7 +76,7 @@ export default defineNuxtModule<ModuleOptions>({
     // Transpile runtime
     const runtimeDir = resolve('./runtime')
     nuxt.options.build.transpile.push(runtimeDir)
-    nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue', '@iconify/vue')
+    nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue')
 
     // @ts-ignore
     nuxt.hook('tailwindcss:config', function (tailwindConfig: TailwindConfig) {
@@ -108,6 +112,9 @@ export default defineNuxtModule<ModuleOptions>({
         variants: ['focus']
       }])
 
+      tailwindConfig.plugins = tailwindConfig.plugins || []
+      tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons) }))
+
       const ui: object = defu(preset, defaultPreset(variantColors))
 
       addTemplate({
@@ -121,9 +128,6 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
-    nuxt.options.appConfig.nuxtIcon = defu(nuxt.options.appConfig.nuxtIcon, { size: false })
-
-    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 a21c4d87..df65f280 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -6,14 +6,14 @@
     :aria-label="ariaLabel"
     v-bind="buttonProps"
   >
-    <IconCSS v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     <slot>
       <span :class="[truncate ? 'text-left break-all line-clamp-1' : '', compact ? 'hidden sm:block' : '']">
         <span :class="[labelCompact && 'hidden sm:block']">{{ label }}</span>
         <span v-if="labelCompact" class="sm:hidden">{{ labelCompact }}</span>
       </span>
     </slot>
-    <IconCSS v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    <Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
   </component>
 </template>
 
@@ -22,6 +22,7 @@ import { ref, computed, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized, RouteLocationRaw } 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 2cc4108a..135a17cf 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -27,7 +27,7 @@
                 @click="item.click"
               >
                 <slot :name="item.slot" :item="item">
-                  <IconCSS v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
+                  <Icon v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
                   <Avatar v-if="item.avatar" v-bind="{ size: 'xxs', ...item.avatar }" :class="itemAvatarClass" />
 
                   <span class="truncate">{{ item.label }}</span>
@@ -57,6 +57,7 @@ import type { RouteLocationNormalized } from 'vue-router'
 import { ref, computed, onMounted } from 'vue'
 import { defu } from 'defu'
 import NuxtLink from '#app/components/nuxt-link'
+import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
 import { classNames, omit } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
new file mode 100644
index 00000000..faddd4af
--- /dev/null
+++ b/src/runtime/components/elements/Icon.vue
@@ -0,0 +1,16 @@
+<template>
+  <span :class="name" />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</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 8048fba3..775c298e 100644
--- a/src/runtime/components/feedback/Alert.vue
+++ b/src/runtime/components/feedback/Alert.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="rounded-md p-4" :class="variantClass">
     <div class="flex">
-      <div class="flex-shrink-0">
-        <IconCSS v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
+      <div class="inline-flex flex-shrink-0">
+        <Icon v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
       </div>
       <div class="ml-3 flex-1 md:flex md:justify-between">
         <p v-if="title" class="text-sm leading-5" :class="titleClass">
@@ -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: {
@@ -56,10 +57,10 @@ const props = defineProps({
 
 const iconName = computed(() => {
   return ({
-    info: 'heroicons-solid:information-circle',
-    warning: 'heroicons-solid:exclamation',
-    error: 'heroicons-solid:x-circle',
-    success: 'heroicons-solid:check-circle'
+    info: 'i-heroicons-information-circle',
+    warning: 'i-heroicons-exclamation',
+    error: 'i-heroicons-x-circle',
+    success: 'i-heroicons-check-circle'
   })[props.variant]
 })
 
diff --git a/src/runtime/components/feedback/AlertDialog.vue b/src/runtime/components/feedback/AlertDialog.vue
index 82cfb1af..9d19c4b1 100644
--- a/src/runtime/components/feedback/AlertDialog.vue
+++ b/src/runtime/components/feedback/AlertDialog.vue
@@ -2,7 +2,7 @@
   <Modal v-model="isOpen" :appear="appear" class="w-full" @close="onClose">
     <div class="sm:flex sm:items-start">
       <div v-if="icon" :class="iconWrapperClass" class="mx-auto flex-shrink-0 flex items-center justify-center rounded-full sm:mx-0">
-        <IconCSS :name="icon" :class="iconClass" />
+        <Icon :name="icon" :class="iconClass" />
       </div>
       <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left space-y-2">
         <DialogTitle v-if="title" as="h3" :class="titleClass">
@@ -23,6 +23,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { DialogTitle, DialogDescription } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import Modal from '../overlays/Modal.vue'
 import Button from '../elements/Button.vue'
 import $ui from '#build/ui'
@@ -54,7 +55,7 @@ const props = defineProps({
   },
   titleClass: {
     type: String,
-    default: () => $ui.alertDialog.icon.title
+    default: () => $ui.alertDialog.title
   },
   description: {
     type: String,
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 198bd6bd..320a5f3c 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -19,16 +19,17 @@
     >
     <slot />
     <div v-if="isLeading" :class="iconLeadingWrapperClass">
-      <IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
+      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
     </div>
     <div v-if="isTrailing" :class="iconTrailingWrapperClass">
-      <IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
+      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 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 16a5b305..522f03e9 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -37,7 +37,7 @@
     </select>
 
     <div v-if="icon" :class="iconWrapperClass">
-      <IconCSS :name="icon" :class="iconClass" />
+      <Icon :name="icon" :class="iconClass" />
     </div>
   </div>
 </template>
@@ -46,6 +46,7 @@
 import { computed } from 'vue'
 import { get } from 'lodash-es'
 import { classNames } from '../../utils'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({
diff --git a/src/runtime/components/forms/SelectCustom.vue b/src/runtime/components/forms/SelectCustom.vue
index 6f07cbeb..72f2918e 100644
--- a/src/runtime/components/forms/SelectCustom.vue
+++ b/src/runtime/components/forms/SelectCustom.vue
@@ -21,7 +21,7 @@
           </slot>
           <slot name="icon">
             <span :class="iconWrapperClass">
-              <IconCSS v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
+              <Icon v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
             </span>
           </slot>
         </button>
@@ -58,7 +58,7 @@
               </div>
 
               <span v-if="selected" :class="resolveOptionIconClass({ active })">
-                <IconCSS v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
+                <Icon v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
               </span>
             </li>
           </ComboboxOption>
@@ -94,6 +94,7 @@ import {
   ComboboxOption,
   ComboboxInput
 } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 9ed0273b..18d43323 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -5,10 +5,10 @@
   >
     <span :class="[active ? containerActiveClass : containerInactiveClass, containerBaseClass]">
       <span v-if="iconOn" :class="[active ? iconActiveClass : iconInactiveClass, iconBaseClass]" aria-hidden="true">
-        <IconCSS :name="iconOn" :class="iconOnClass" />
+        <Icon :name="iconOn" :class="iconOnClass" />
       </span>
       <span v-if="iconOff" :class="[active ? iconInactiveClass : iconActiveClass, iconBaseClass]" aria-hidden="true">
-        <IconCSS :name="iconOff" :class="iconOffClass" />
+        <Icon :name="iconOff" :class="iconOffClass" />
       </span>
     </span>
   </Switch>
@@ -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({
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 783d02dd..de658dfb 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -9,7 +9,7 @@
   >
     <div :class="$ui.commandPalette.wrapper">
       <div v-show="searchable" class="relative flex items-center">
-        <IconCSS v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
+        <Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
@@ -46,7 +46,7 @@
       </ComboboxOptions>
 
       <div v-else-if="placeholder" class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
-        <IconCSS v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
+        <Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
         <p class="text-sm text-center u-text-gray-900">
           {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
         </p>
@@ -64,6 +64,7 @@ import { groupBy, map } from 'lodash-es'
 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'
 import $ui from '#build/ui'
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index 76e60c73..3e55fee7 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -15,7 +15,7 @@
       >
         <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div class="flex items-center gap-2 min-w-0">
-            <IconCSS v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
+            <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
             <Avatar
               v-else-if="command.avatar"
               v-bind="{ size: 'xxxs', ...command.avatar }"
@@ -35,7 +35,7 @@
             </div>
           </div>
 
-          <IconCSS v-if="selected" name="heroicons-outline:check" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
+          <Icon v-if="selected" :name="$ui.commandPalette.option.selected.icon.name" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
           <slot v-else-if="active && (group.active || $slots[`${group.key}-active`])" :name="`${group.key}-active`" :group="group" :command="command">
             <span v-if="group.active" class="flex-shrink-0 u-text-gray-500">{{ group.active }}</span>
           </slot>
@@ -54,8 +54,10 @@
 <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'
+import $ui from '#build/ui'
 
 defineProps({
   group: {
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 2b63dd9d..386afa27 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -19,7 +19,7 @@
         />
       </slot>
       <slot name="icon" :link="link" :is-active="isActive">
-        <IconCSS
+        <Icon
           v-if="link.icon"
           :name="link.icon"
           :class="[iconBaseClass, link.label && iconSpacingClass, isActive ? iconActiveClass : iconInactiveClass, link.iconClass]"
@@ -40,6 +40,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
+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 b2e2d917..a6db082f 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -9,7 +9,7 @@
         <div class="p-4">
           <div class="flex gap-3" :class="{ 'items-start': description, 'items-center': !description }">
             <div v-if="iconName" class="flex-shrink-0">
-              <IconCSS :name="iconName" :class="iconClass" />
+              <Icon :name="iconName" :class="iconClass" />
             </div>
             <div class="w-0 flex-1">
               <p class="text-sm font-medium u-text-gray-900">
@@ -33,11 +33,11 @@
               </div>
 
               <button
-                class="transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
+                class="inline-flex transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
                 @click.stop="onClose"
               >
                 <span class="sr-only">Close</span>
-                <IconCSS name="heroicons-solid:x" class="w-5 h-5" />
+                <Icon :name="$ui.notification.close.icon.name" class="w-5 h-5" />
               </button>
             </div>
           </div>
@@ -53,6 +53,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'
 import type { ToastNotificationAction } from '../../types'
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index aba2639b..1d843176 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -48,7 +48,7 @@ export default function defaultPreset (variantColors: string[]) {
     },
     icon: {
       base: 'flex-shrink-0',
-      loading: 'heroicons-outline:refresh',
+      loading: 'i-heroicons-arrow-path',
       size: {
         xxs: 'h-3.5 w-3.5',
         xs: 'h-4 w-4',
@@ -168,7 +168,7 @@ export default function defaultPreset (variantColors: string[]) {
     },
     icon: {
       base: 'u-text-gray-400',
-      loading: 'heroicons-outline:refresh',
+      loading: 'i-heroicons-arrow-path',
       size: {
         xxs: 'h-3 w-3',
         xs: 'h-4 w-4',
@@ -215,7 +215,7 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative',
     base: `${select.base} text-left cursor-default`,
     icon: {
-      name: 'heroicons-solid:selector',
+      name: 'i-heroicons-chevron-up-down-20-solid',
       ...select.icon
     },
     list: {
@@ -233,7 +233,7 @@ export default function defaultPreset (variantColors: string[]) {
         disabled: 'cursor-not-allowed opacity-50',
         empty: 'text-sm u-text-gray-400 px-4 py-2',
         icon: {
-          name: 'heroicons-solid:check',
+          name: 'i-heroicons-check-20-solid',
           base: 'absolute inset-y-0 right-0 flex items-center pr-4',
           active: 'text-white',
           inactive: 'text-primary-600',
@@ -355,11 +355,11 @@ export default function defaultPreset (variantColors: string[]) {
 
   const alertDialog = {
     icon: {
-      wrapper: 'h-12 w-12 sm:h-10 sm:w-10 bg-primary-100',
-      base: 'text-primary-600'
+      wrapper: 'mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary-100 sm:mx-0 sm:h-10 sm:w-10',
+      base: 'h-6 w-6 text-primary-600'
     },
-    title: 'text-lg leading-6 font-medium text-gray-900',
-    description: 'text-sm text-gray-500'
+    title: 'text-lg leading-6 font-medium u-text-gray-900',
+    description: 'text-sm u-text-gray-500'
   }
 
   const dropdown = {
@@ -483,10 +483,10 @@ export default function defaultPreset (variantColors: string[]) {
     rounded: 'rounded-lg',
     ring: 'ring-1 u-ring-gray-200',
     type: {
-      info: 'heroicons-outline:information-circle',
-      success: 'heroicons-outline:check-circle',
-      warning: 'heroicons-outline:exclamation-circle',
-      error: 'heroicons-outline:x-circle'
+      info: 'i-heroicons-information-circle',
+      success: 'i-heroicons-check-circle',
+      warning: 'i-heroicons-exclamation-circle',
+      error: 'i-heroicons-x-circle'
     },
     icon: {
       base: 'w-6 h-6',
@@ -497,6 +497,11 @@ export default function defaultPreset (variantColors: string[]) {
         error: 'text-red-400'
       }
     },
+    close: {
+      icon: {
+        name: 'i-heroicons-x-mark-20-solid'
+      }
+    },
     transition: {
       enterActiveClass: 'transform ease-out duration-300 transition',
       enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
@@ -572,7 +577,7 @@ export default function defaultPreset (variantColors: string[]) {
       base: 'w-full h-12 pr-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 pl-[3.25rem] u-text-gray-900 focus:ring-0 sm:text-sm',
       icon: {
         base: 'pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400',
-        name: 'heroicons-outline:search'
+        name: 'i-heroicons-magnifying-glass'
       },
       close: {
         base: 'absolute right-2',
@@ -585,7 +590,14 @@ export default function defaultPreset (variantColors: string[]) {
     },
     empty: {
       icon: {
-        name: 'heroicons-outline:search'
+        name: 'i-heroicons-magnifying-glass'
+      }
+    },
+    option: {
+      selected: {
+        icon: {
+          name: 'i-heroicons-check-20-solid'
+        }
       }
     }
   }
diff --git a/yarn.lock b/yarn.lock
index 0ab3fcb6..c408bb11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,6 +10,19 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@antfu/install-pkg@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@antfu/install-pkg/-/install-pkg-0.1.1.tgz#157bb04f0de8100b9e4c01734db1a6c77e98bbb5"
+  integrity sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==
+  dependencies:
+    execa "^5.1.1"
+    find-up "^5.0.0"
+
+"@antfu/utils@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.2.tgz#3bb6f37a6b188056fe9e2f363b6aa735ed65d7ca"
+  integrity sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
@@ -416,6 +429,13 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
+"@egoist/tailwindcss-icons@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@egoist/tailwindcss-icons/-/tailwindcss-icons-1.0.3.tgz#c39f8463ca1ccb6bc853599d6c32bd0ee502de95"
+  integrity sha512-A5diFOuxbUibl1iCebEKNtgbXe2iWnHJfWUL13sWS7Y1+GkdiSjaoUeYJuW7mIfVr54XGEIQBgBB2QDVejdH+A==
+  dependencies:
+    "@iconify/utils" "^2.1.3"
+
 "@esbuild/android-arm64@0.16.17":
   version "0.16.17"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz#cf91e86df127aa3d141744edafcba0abdc577d23"
@@ -690,17 +710,36 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
-"@iconify/types@^2.0.0":
+"@iconify-json/heroicons@^1.1.9":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@iconify-json/heroicons/-/heroicons-1.1.9.tgz#51621892f56de23767004b5fc4dfd12cd557417a"
+  integrity sha512-pDYg74VvhWTMbq+Hrvm0XhmyxGBr2XrQtSjpoWht/vNfHnlQRHP8Z+lPAGMQXYimb3+IaiHwJ5eeEED7KBNIJg==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify-json/mdi@^1.1.47":
+  version "1.1.47"
+  resolved "https://registry.yarnpkg.com/@iconify-json/mdi/-/mdi-1.1.47.tgz#f2e483b2c900b31d6c9e2f2c1a8e6b4400c56e00"
+  integrity sha512-5E5mazdQaMNl3gmLL7whteh61weJBRfW2R9Rq0/pgAe9B0j22mViyADm/ooHZx07Vkc0ZqnkgUrpT6OsS9Qhzg==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify/types@*", "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
   integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
 
-"@iconify/vue@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@iconify/vue/-/vue-4.1.0.tgz#ce3dc1b34b08fe2a1e34ef9e0c860796a18e76ea"
-  integrity sha512-rBQVxNoSDooqgWkQg2MqkIHkH/huNuvXGqui5wijc1zLnU7TKzbBHW9VGmbnV4asNTmIHmqV4Nvt0M2rZ/9nHA==
+"@iconify/utils@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@iconify/utils/-/utils-2.1.3.tgz#00f669c513d517186d6c8baa4d819354e7c74c0d"
+  integrity sha512-4rnzpZ2AWztPKDyWtw+DwJ9uko24it6YS+cnVpZveOrvLErwg22eXcGnIfuMFyECvsfbFhMqZW5YYWHe3CyEEg==
   dependencies:
+    "@antfu/install-pkg" "^0.1.1"
+    "@antfu/utils" "^0.7.2"
     "@iconify/types" "^2.0.0"
+    debug "^4.3.4"
+    kolorist "^1.7.0"
+    local-pkg "^0.4.3"
 
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
@@ -2161,21 +2200,6 @@ chalk@^5.2.0:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
   integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==
 
-changelogen@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/changelogen/-/changelogen-0.4.1.tgz#41361aed69ea963154f92dc28d85071d7d8ed461"
-  integrity sha512-p1dJO1Z995odIxdypzAykHIaUu+XnEvwYPSTyKJsbpL82o99sxN1G24tbecoMxTsV4PI+ZId82GJXRL2hhOeJA==
-  dependencies:
-    c12 "^1.1.0"
-    consola "^2.15.3"
-    convert-gitmoji "^0.1.3"
-    execa "^6.1.0"
-    mri "^1.2.0"
-    node-fetch-native "^1.0.1"
-    pkg-types "^1.0.1"
-    scule "^1.0.0"
-    semver "^7.3.8"
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -2572,11 +2596,6 @@ conventional-recommended-bump@6.1.0:
     meow "^8.0.0"
     q "^1.5.1"
 
-convert-gitmoji@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/convert-gitmoji/-/convert-gitmoji-0.1.3.tgz#0263f1e201920cd0ccff391bdb492b640314fddb"
-  integrity sha512-t5yxPyI8h8KPvRwrS/sRrfIpT2gJbmBAY0TFokyUBy3PM44RuFRpZwHdACz+GTSPLRLo3s4qsscOMLjHiXBwzw==
-
 convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -3650,21 +3669,6 @@ execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-execa@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-6.1.0.tgz#cea16dee211ff011246556388effa0818394fb20"
-  integrity sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.1"
-    human-signals "^3.0.1"
-    is-stream "^3.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^5.1.0"
-    onetime "^6.0.0"
-    signal-exit "^3.0.7"
-    strip-final-newline "^3.0.0"
-
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -3960,7 +3964,7 @@ get-port-please@^3.0.1:
   resolved "https://registry.yarnpkg.com/get-port-please/-/get-port-please-3.0.1.tgz#a24953a41dc249f76869ac25e81d6623e61ab010"
   integrity sha512-R5pcVO8Z1+pVDu8Ml3xaJCEkBiiy1VQN9za0YqH8GIi1nIqD4IzQhzY6dDzMRtdS1lyiGlucRzm8IN8wtLIXng==
 
-get-stream@^6.0.0, get-stream@^6.0.1:
+get-stream@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -4347,11 +4351,6 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-human-signals@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
-  integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==
-
 iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -4648,11 +4647,6 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
-is-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
-  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
-
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -4887,6 +4881,11 @@ koa@^2.12.0:
     type-is "^1.6.16"
     vary "^1.1.2"
 
+kolorist@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.7.0.tgz#8e22bc470ea2d2743dbd461808f8b5246b19f5f4"
+  integrity sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==
+
 lazystream@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.1.tgz#494c831062f1f9408251ec44db1cba29242a2638"
@@ -5235,11 +5234,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mimic-fn@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
-  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -5609,13 +5603,6 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-npm-run-path@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
-  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
-  dependencies:
-    path-key "^4.0.0"
-
 npmlog@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
@@ -5640,27 +5627,6 @@ nuxi@3.2.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-nuxt-config-schema@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/nuxt-config-schema/-/nuxt-config-schema-0.4.4.tgz#473d5210e2fb2c049af63180e039b9c05548d544"
-  integrity sha512-5NnyyH2qSgraQo6kcW/8SWqBZ/pEY/PwyepODPWYYv4ZZ8BiqC850OTmyO2oTBL4O+Xg4fR7hAwSB4g5pIMpSg==
-  dependencies:
-    "@nuxt/kit" "^3.0.0"
-    changelogen "^0.4.1"
-    defu "^6.1.2"
-    jiti "^1.16.2"
-    pathe "^1.0.0"
-    untyped "^1.2.2"
-
-nuxt-icon@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/nuxt-icon/-/nuxt-icon-0.3.2.tgz#d28d9f0def8a632c51db20c5fe5b8d5dcf2a78c9"
-  integrity sha512-066pfova2nE9GZDvHE9oMkqJCwsnJvOZKU2FOSzRpjfXupH3UPtP9Zw8+C2wvZ82Nel6fuRoIUNQh5Sx8ZeQrQ==
-  dependencies:
-    "@iconify/vue" "^4.1.0"
-    "@nuxt/kit" "^3.2.0"
-    nuxt-config-schema "^0.4.4"
-
 nuxt@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.2.0.tgz#d952f8d2c2776a74656b80cc72a6533b56c0ad6c"
@@ -5785,13 +5751,6 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
-onetime@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
-  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
-  dependencies:
-    mimic-fn "^4.0.0"
-
 only@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
@@ -5984,11 +5943,6 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-key@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
-  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
-
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -6902,7 +6856,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -7119,11 +7073,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-final-newline@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
-  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
-
 strip-indent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"