feat(Icon)!: migrate from @egoist/tailwindcss-icons to new @nuxt/icon (#1789)

src/module.ts

@@ -1,6 +1,5 @@
 import { createRequire } from 'node:module'
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
-import type { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import createTemplates from './templates'
 import * as config from './runtime/ui.config'
@@ -48,8 +47,6 @@ export interface ModuleOptions {
    */
   global?: boolean
 
-  icons: CollectionNames[] | 'all' | IconsPluginOptions
-
   safelistColors?: string[]
   /**
    * Disables the global css styles added by the module.
@@ -68,7 +65,6 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     prefix: 'U',
-    icons: ['heroicons'],
     safelistColors: ['primary'],
     disableGlobalStyles: false
   },
@@ -90,7 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Modules
 
-    await installModule('nuxt-icon')
+    await installModule('@nuxt/icon', { componentName: 'UIcon' })
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installTailwind(options, nuxt, resolve)
 

src/runtime/components/data/Table.vue

@@ -89,10 +89,7 @@ import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
-import UIcon from '../elements/Icon.vue'
-import UButton from '../elements/Button.vue'
-import UProgress from '../elements/Progress.vue'
-import UCheckbox from '../forms/Checkbox.vue'
+import { UIcon, UButton, UProgress, UCheckbox } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, get } from '../../utils'
 import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types'

src/runtime/components/elements/Accordion.vue

@@ -69,8 +69,7 @@
 import { ref, computed, toRef, defineComponent, watch } from 'vue'
 import type { PropType } from 'vue'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from '@headlessui/vue'
-import UIcon from '../elements/Icon.vue'
-import UButton from '../elements/Button.vue'
+import { UIcon, UButton } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
 import type { AccordionItem, Strategy } from '../../types'

src/runtime/components/elements/Alert.vue

@@ -43,9 +43,7 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import UButton from '../elements/Button.vue'
+import { UIcon, UAvatar, UButton } from '#components'
 import { useUI } from '../../composables/useUI'
 import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types'
 import { mergeConfig } from '../../utils'

src/runtime/components/elements/Avatar.vue

@@ -24,7 +24,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
+import { UIcon } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'

src/runtime/components/elements/Button.vue

@@ -20,8 +20,7 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import ULink from '../elements/Link.vue'
+import { UIcon, ULink } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'

src/runtime/components/elements/Dropdown.vue

@@ -61,9 +61,7 @@ import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import UKbd from '../elements/Kbd.vue'
+import { UIcon, UAvatar, UKbd } from '#components'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig, getNuxtLinkProps } from '../../utils'

src/runtime/components/elements/Icon.vue

@@ -1,33 +0,0 @@
-<template>
-  <Icon v-if="dynamic" :name="name" />
-  <span v-else :class="name" />
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useAppConfig } from '#imports'
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    dynamic: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup (props) {
-    const appConfig = useAppConfig()
-
-    // @ts-ignore
-    const dynamic = computed(() => props.dynamic || appConfig.ui?.icons?.dynamic)
-
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      dynamic
-    }
-  }
-})
-</script>

src/runtime/components/elements/Meter.vue

@@ -31,7 +31,7 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import UIcon from './Icon.vue'
+import { UIcon } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Strategy, MeterColor, MeterSize } from '../../types'

src/runtime/components/elements/MeterGroup.ts

@@ -1,7 +1,7 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import UIcon from './Icon.vue'
+import { UIcon } from '#components'
 import Meter from './Meter.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'

src/runtime/components/forms/Input.vue

@@ -35,7 +35,7 @@
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
+import { UIcon } from '#components'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/InputMenu.vue

@@ -104,8 +104,7 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
+import { UIcon, UAvatar } from '#components'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Select.vue

@@ -56,7 +56,7 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
+import { UIcon } from '#components'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'

src/runtime/components/forms/SelectMenu.vue

@@ -140,8 +140,7 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
+import { UIcon, UAvatar } from '#components'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Toggle.vue

@@ -34,7 +34,7 @@ import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
+import { UIcon } from '#components'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'

src/runtime/components/layout/Divider.vue

@@ -22,8 +22,7 @@
 import { toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
+import { UIcon, UAvatar } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Avatar, DividerSize, Strategy } from '../../types'

src/runtime/components/navigation/Breadcrumb.vue

@@ -37,8 +37,7 @@
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import ULink from '../elements/Link.vue'
+import { UIcon, ULink } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { BreadcrumbLink, Strategy } from '../../types'

src/runtime/components/navigation/CommandPalette.vue

@@ -70,8 +70,7 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
-import UIcon from '../elements/Icon.vue'
-import UButton from '../elements/Button.vue'
+import { UIcon, UButton } from '#components'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -73,9 +73,7 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import UKbd from '../elements/Kbd.vue'
+import { UIcon, UAvatar, UKbd } from '#components'
 import type { Group } from '../../types'
 import { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'

src/runtime/components/navigation/HorizontalNavigation.vue

@@ -55,10 +55,7 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import UBadge from '../elements/Badge.vue'
-import ULink from '../elements/Link.vue'
+import { UIcon, UAvatar, UBadge, ULink } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { HorizontalNavigationLink, Strategy } from '../../types'

src/runtime/components/navigation/VerticalNavigation.vue

@@ -56,11 +56,7 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import UBadge from '../elements/Badge.vue'
-import ULink from '../elements/Link.vue'
-import UDivider from '../layout/Divider.vue'
+import { UIcon, UAvatar, UBadge, ULink, UDivider } from '#components'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { VerticalNavigationLink, Strategy } from '../../types'

src/runtime/components/overlays/Notification.vue

@@ -46,9 +46,7 @@
 import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import UButton from '../elements/Button.vue'
+import { UIcon, UAvatar, UButton } from '#components'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
 import { mergeConfig } from '../../utils'

src/tailwind.ts

@@ -38,7 +38,6 @@ export default async function installTailwind (
     getContents: ({ nuxt }) => `
       const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
       const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))})
-      const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
 
       const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
@@ -48,8 +47,7 @@ export default async function installTailwind (
           require('@tailwindcss/aspect-ratio'),
           require('@tailwindcss/typography'),
           require('@tailwindcss/container-queries'),
-          require('@headlessui/tailwindcss'),
-          iconsPlugin(${Array.isArray(moduleOptions.icons) || moduleOptions.icons === 'all' ? `{ collections: getIconCollections(${JSON.stringify(moduleOptions.icons)}) }` : typeof moduleOptions.icons === 'object' ? JSON.stringify(moduleOptions.icons) : {}})
+          require('@headlessui/tailwindcss')
         ],
         content: {
           files: [