feat: use nuxt-icon

docs/app.vue

@@ -79,7 +79,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' }] },

docs/pages/examples.vue

@@ -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">
-            <UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
+            <IconCSS name="heroicons-outline: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">
@@ -117,7 +117,7 @@
       </div>
 
       <UTooltip text="Hello tooltip!" :shortcuts="['⌘', 'G']">
-        <UIcon name="heroicons-outline:information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
+        <IconCSS name="heroicons-outline:information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
       </UTooltip>
     </div>
 

docs/pages/migration.vue

@@ -105,13 +105,6 @@ const components = [
     preset: true,
     typescript: true
   },
-  {
-    label: 'Icon',
-    to: '/components/Icon',
-    nuxt3: true,
-    capi: true,
-    typescript: true
-  },
   {
     label: 'Link',
     to: '/components/Link',

package.json

@@ -25,11 +25,11 @@
     "release": "yarn lint && standard-version && git push --follow-tags"
   },
   "dependencies": {
-    "@headlessui/vue": "1.7.9",
+    "@headlessui/vue": "^1.7.10",
     "@iconify/vue": "^4.1.0",
-    "@nuxt/kit": "^3.1.2",
+    "@nuxt/kit": "^3.2.0",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.3.1",
+    "@nuxtjs/tailwindcss": "^6.4.0",
     "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
@@ -40,18 +40,19 @@
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
-    "tailwindcss": "^3.2.4"
+    "nuxt-icon": "^0.3.1",
+    "tailwindcss": "^3.2.6"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.13.0",
-    "eslint": "^8.33.0",
+    "eslint": "^8.34.0",
-    "nuxt": "^3.1.2",
+    "nuxt": "^3.2.0",
     "standard-version": "^9.5.0",
     "unbuild": "^1.1.1",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.1.0"
   },
   "build": {
     "externals": [

src/module.ts

@@ -121,6 +121,9 @@ 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,

src/runtime/components/elements/Button.vue

@@ -6,14 +6,14 @@
     :aria-label="ariaLabel"
     v-bind="buttonProps"
   >
-    <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    <IconCSS 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>
-    <Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    <IconCSS v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
   </component>
 </template>
 
@@ -22,7 +22,6 @@ 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'
 

src/runtime/components/elements/Dropdown.vue

@@ -27,7 +27,7 @@
                 @click="item.click"
               >
                 <slot :name="item.slot" :item="item">
-                  <Icon v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
+                  <IconCSS 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,7 +57,6 @@ 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'

src/runtime/components/elements/Icon.vue

@@ -1,56 +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 { Icon as Iconify } from '@iconify/vue/dist/offline'
-import { loadIcon } from '@iconify/vue'
-import { useNuxtApp, useState, computed, watch, onMounted } from '#imports'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true
-  }
-})
-const nuxtApp = useNuxtApp()
-const state = useState<Record<string, Required<IconifyIcon> | Promise<void> | null>>('u-icons', () => ({}))
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-const isFetching = computed(() => state.value?.[props.name] && ('then' in state.value?.[props.name]!))
-const icon = computed<Required<IconifyIcon> | null>(() =>
-  !state.value?.[props.name] || 'then' in state.value[props.name]!
-    ? null
-    : state.value[props.name] as Required<IconifyIcon>
-)
-const component = computed(() => nuxtApp.vueApp.component(props.name))
-
-const loadIconComponent = (name: string) => {
-  state.value = state.value || {}
-  if (nuxtApp.vueApp.component(props.name) || state.value[name] || state.value[name] === null) { return state.value[name] }
-
-  state.value[name] = loadIcon(name)
-    .then((res) => { state.value[name] = res })
-    // We won't try to load this icon again if it fails
-    .catch(() => { state.value[name] = null })
-
-  // return an awaitable promise
-  return state.value[name]
-}
-
-onMounted(() => {
-  watch(() => props.name, loadIconComponent, { immediate: true })
-})
-
-if (process.server) {
-  await loadIconComponent(props.name)
-}
-</script>
-
-<script lang="ts">
-export default { name: 'UIcon' }
-</script>

src/runtime/components/feedback/Alert.vue

@@ -2,7 +2,7 @@
   <div class="rounded-md p-4" :class="variantClass">
     <div class="flex">
       <div class="flex-shrink-0">
-        <Icon v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
+        <IconCSS 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,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: {

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">
-        <Icon :name="icon" :class="iconClass" />
+        <IconCSS :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">
@@ -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({

src/runtime/components/forms/Input.vue

@@ -19,17 +19,16 @@
     >
     <slot />
     <div v-if="isLeading" :class="iconLeadingWrapperClass">
-      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
+      <IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
     </div>
     <div v-if="isTrailing" :class="iconTrailingWrapperClass">
-      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
+      <IconCSS 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'
 

src/runtime/components/forms/Select.vue

@@ -37,7 +37,7 @@
     </select>
 
     <div v-if="icon" :class="iconWrapperClass">
-      <Icon :name="icon" :class="iconClass" />
+      <IconCSS :name="icon" :class="iconClass" />
     </div>
   </div>
 </template>
@@ -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'
 

src/runtime/components/forms/SelectCustom.vue

@@ -21,7 +21,7 @@
           </slot>
           <slot name="icon">
             <span :class="iconWrapperClass">
-              <Icon v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
+              <IconCSS 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 })">
-                <Icon v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
+                <IconCSS v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
               </span>
             </li>
           </ComboboxOption>
@@ -94,7 +94,6 @@ 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'

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">
-        <Icon :name="iconOn" :class="iconOnClass" />
+        <IconCSS :name="iconOn" :class="iconOnClass" />
       </span>
       <span v-if="iconOff" :class="[active ? iconInactiveClass : iconActiveClass, iconBaseClass]" aria-hidden="true">
-        <Icon :name="iconOff" :class="iconOffClass" />
+        <IconCSS :name="iconOff" :class="iconOffClass" />
       </span>
     </span>
   </Switch>
@@ -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({

src/runtime/components/navigation/CommandPalette.vue

@@ -9,7 +9,7 @@
   >
     <div :class="$ui.commandPalette.wrapper">
       <div v-show="searchable" class="relative flex items-center">
-        <Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
+        <IconCSS 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">
-        <Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
+        <IconCSS 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,7 +64,6 @@ 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'

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">
-            <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" />
+            <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" />
             <Avatar
               v-else-if="command.avatar"
               v-bind="{ size: 'xxxs', ...command.avatar }"
@@ -35,7 +35,7 @@
             </div>
           </div>
 
-          <Icon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
+          <IconCSS v-if="selected" name="heroicons-outline:check" 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,7 +54,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'
 

src/runtime/components/navigation/VerticalNavigation.vue

@@ -19,7 +19,7 @@
         />
       </slot>
       <slot name="icon" :link="link" :is-active="isActive">
-        <Icon
+        <IconCSS
           v-if="link.icon"
           :name="link.icon"
           :class="[iconBaseClass, link.label && iconSpacingClass, isActive ? iconActiveClass : iconInactiveClass, link.iconClass]"
@@ -40,7 +40,6 @@
 <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'

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">
-              <Icon :name="iconName" :class="iconClass" />
+              <IconCSS :name="iconName" :class="iconClass" />
             </div>
             <div class="w-0 flex-1">
               <p class="text-sm font-medium u-text-gray-900">
@@ -37,7 +37,7 @@
                 @click.stop="onClose"
               >
                 <span class="sr-only">Close</span>
-                <Icon name="heroicons-solid:x" class="w-5 h-5" />
+                <IconCSS name="heroicons-solid:x" class="w-5 h-5" />
               </button>
             </div>
           </div>
@@ -53,7 +53,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'
 import type { ToastNotificationAction } from '../../types'