From f98398f72f0933e0d65104b3b110566727041ae1 Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Sat, 16 Aug 2025 10:21:00 +0700
Subject: [PATCH 01/11] feat(icon): allow passing a component instead of a name

---
 src/runtime/components/Icon.vue     | 7 +++++--
 src/runtime/vue/components/Icon.vue | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Icon.vue b/src/runtime/components/Icon.vue
index 8d816fa245..72484709d9 100644
--- a/src/runtime/components/Icon.vue
+++ b/src/runtime/components/Icon.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
+import type { Component } from 'vue'
+
 export interface IconProps {
-  name: string
+  name: string | Component
   mode?: 'svg' | 'css'
   size?: string | number
   customize?: (
@@ -22,5 +24,6 @@ const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'c
 </script>
 
 <template>
-  <Icon v-bind="iconProps" />
+  <Icon v-if="typeof name === 'string'" v-bind="iconProps" />
+  <component :is="name" v-else />
 </template>
diff --git a/src/runtime/vue/components/Icon.vue b/src/runtime/vue/components/Icon.vue
index 6b6cde5341..db75c4afd3 100644
--- a/src/runtime/vue/components/Icon.vue
+++ b/src/runtime/vue/components/Icon.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
+import type { IconProps as NuxtIconProps } from '../../types'
+
 export interface IconProps {
-  name: string
+  name: NuxtIconProps['name']
 }
 </script>
 
@@ -11,5 +13,6 @@ defineProps<IconProps>()
 </script>
 
 <template>
-  <IconifyIcon :icon="name.replace(/^i-/, '')" />
+  <IconifyIcon v-if="typeof name === 'string'" :icon="name.replace(/^i-/, '')" />
+  <component :is="name" v-else />
 </template>

From 0eb7e30dc318474e4519f48a1428d6c671e28545 Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Sat, 16 Aug 2025 10:33:22 +0700
Subject: [PATCH 02/11] feat(*): allow passing a component instead of an icon
 name in all components

---
 src/runtime/components/Accordion.vue             |  7 ++++---
 src/runtime/components/Alert.vue                 |  6 +++---
 src/runtime/components/AuthForm.vue              |  4 ++--
 src/runtime/components/Avatar.vue                |  4 ++--
 src/runtime/components/Banner.vue                |  6 +++---
 src/runtime/components/Breadcrumb.vue            |  6 +++---
 src/runtime/components/Calendar.vue              | 10 +++++-----
 src/runtime/components/Carousel.vue              |  6 +++---
 src/runtime/components/ChatMessage.vue           |  4 ++--
 src/runtime/components/ChatMessages.vue          |  4 ++--
 src/runtime/components/ChatPromptSubmit.vue      | 10 +++++-----
 src/runtime/components/Checkbox.vue              |  5 +++--
 src/runtime/components/CommandPalette.vue        | 16 ++++++++--------
 src/runtime/components/ContextMenu.vue           | 10 +++++-----
 src/runtime/components/ContextMenuContent.vue    |  8 ++++----
 src/runtime/components/DashboardNavbar.vue       |  4 ++--
 src/runtime/components/DashboardSearch.vue       |  8 ++++----
 src/runtime/components/DashboardSearchButton.vue |  4 ++--
 src/runtime/components/DropdownMenu.vue          | 10 +++++-----
 src/runtime/components/DropdownMenuContent.vue   |  8 ++++----
 src/runtime/components/FileUpload.vue            |  8 ++++----
 src/runtime/components/FooterColumns.vue         |  4 ++--
 src/runtime/components/InputMenu.vue             | 10 +++++-----
 src/runtime/components/InputNumber.vue           |  6 +++---
 src/runtime/components/InputTags.vue             |  4 ++--
 src/runtime/components/Modal.vue                 |  4 ++--
 src/runtime/components/NavigationMenu.vue        | 10 +++++-----
 src/runtime/components/PageAnchors.vue           |  4 ++--
 src/runtime/components/PageCard.vue              |  4 ++--
 src/runtime/components/PageFeature.vue           |  4 ++--
 src/runtime/components/PageLinks.vue             |  4 ++--
 src/runtime/components/PageSection.vue           |  4 ++--
 src/runtime/components/Pagination.vue            | 12 ++++++------
 src/runtime/components/PricingPlan.vue           |  4 ++--
 src/runtime/components/Select.vue                |  8 ++++----
 src/runtime/components/SelectMenu.vue            |  8 ++++----
 src/runtime/components/Separator.vue             |  4 ++--
 src/runtime/components/Slideover.vue             |  4 ++--
 src/runtime/components/Stepper.vue               |  4 ++--
 src/runtime/components/Switch.vue                |  8 ++++----
 src/runtime/components/Tabs.vue                  |  4 ++--
 src/runtime/components/Timeline.vue              |  4 ++--
 src/runtime/components/Toast.vue                 |  6 +++---
 src/runtime/components/Tree.vue                  | 12 ++++++------
 .../components/content/ContentNavigation.vue     |  8 ++++----
 src/runtime/components/content/ContentSearch.vue | 12 ++++++------
 .../components/content/ContentSearchButton.vue   |  4 ++--
 .../components/content/ContentSurround.vue       | 11 ++++++-----
 src/runtime/components/content/ContentToc.vue    |  3 ++-
 src/runtime/components/prose/Accordion.vue       |  3 ++-
 src/runtime/components/prose/Callout.vue         |  4 ++--
 src/runtime/components/prose/Card.vue            |  4 ++--
 src/runtime/components/prose/CodeCollapse.vue    |  3 ++-
 src/runtime/components/prose/CodeGroup.vue       |  3 ++-
 src/runtime/components/prose/CodeIcon.vue        |  3 ++-
 src/runtime/components/prose/CodeTree.vue        |  3 ++-
 src/runtime/components/prose/Collapsible.vue     |  3 ++-
 src/runtime/components/prose/Pre.vue             |  3 ++-
 src/runtime/components/prose/Tabs.vue            |  3 ++-
 src/runtime/composables/useComponentIcons.ts     | 10 +++++-----
 60 files changed, 188 insertions(+), 176 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 52af6f112b..da99b2271d 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -3,6 +3,7 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/accordion'
+import type { IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -13,11 +14,11 @@ export interface AccordionItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   slot?: string
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
@@ -40,7 +41,7 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index d2366dafad..1d9ab5c5c1 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/alert'
-import type { AvatarProps, ButtonProps } from '../types'
+import type { AvatarProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>
@@ -17,7 +17,7 @@ export interface AlertProps {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * @defaultValue 'primary'
@@ -51,7 +51,7 @@ export interface AlertProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   class?: any
   ui?: Alert['slots']
 }
diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index b4891f7253..4cd46b5860 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/auth-form'
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps } from '../types'
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps, IconProps } from '../types'
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form'
 import type { ComponentConfig } from '../types/tv'
 
@@ -29,7 +29,7 @@ export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F exte
    * The icon displayed above the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   fields?: F[]
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 8fb2bea034..ad6c6fe860 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/avatar'
-import type { ChipProps } from '../types'
+import type { ChipProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>
@@ -17,7 +17,7 @@ export interface AvatarProps {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   text?: string
   /**
    * @defaultValue 'md'
diff --git a/src/runtime/components/Banner.vue b/src/runtime/components/Banner.vue
index fd2d28e00b..5a093a2d9a 100644
--- a/src/runtime/components/Banner.vue
+++ b/src/runtime/components/Banner.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/banner'
-import type { ButtonProps, LinkProps } from '../types'
+import type { ButtonProps, IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Banner = ComponentConfig<typeof theme, AppConfig, 'banner'>
@@ -22,7 +22,7 @@ export interface BannerProps {
    * The icon displayed next to the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   /**
    * Display a list of actions next to the title.
@@ -47,7 +47,7 @@ export interface BannerProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   class?: any
   ui?: Banner['slots']
 }
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index b31b7b1c2e..d30e60ca14 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/breadcrumb'
-import type { AvatarProps, LinkProps } from '../types'
+import type { AvatarProps, IconProps, LinkProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -13,7 +13,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   slot?: string
   class?: any
@@ -33,7 +33,7 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  separatorIcon?: string
+  separatorIcon?: IconProps['name']
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 1d95d54099..c76ed46b50 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -3,7 +3,7 @@ import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, Rang
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>
@@ -33,7 +33,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
    * @IconifyIcon
    */
-  nextYearIcon?: string
+  nextYearIcon?: IconProps['name']
   /**
    * Configure the next year button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -44,7 +44,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  nextMonthIcon?: string
+  nextMonthIcon?: IconProps['name']
   /**
    * Configure the next month button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -55,7 +55,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
    * @IconifyIcon
    */
-  prevYearIcon?: string
+  prevYearIcon?: IconProps['name']
   /**
    * Configure the prev year button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -66,7 +66,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronLeft
    * @IconifyIcon
    */
-  prevMonthIcon?: string
+  prevMonthIcon?: IconProps['name']
   /**
    * Configure the prev month button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index b5364b43f6..d74b83c425 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -10,7 +10,7 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
 import type { FadeOptionsType } from 'embla-carousel-fade'
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import theme from '#build/ui/carousel'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>
@@ -39,7 +39,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
    * @defaultValue appConfig.ui.icons.arrowLeft
    * @IconifyIcon
    */
-  prevIcon?: string
+  prevIcon?: IconProps['name']
   /**
    * Configure the next button when arrows are enabled.
    * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
@@ -50,7 +50,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
    * @defaultValue appConfig.ui.icons.arrowRight
    * @IconifyIcon
    */
-  nextIcon?: string
+  nextIcon?: IconProps['name']
   /**
    * Display prev and next buttons to scroll the carousel.
    * @defaultValue false
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 939cede291..04f54cc44a 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UIMessage } from 'ai'
 import theme from '#build/ui/chat-message'
-import type { AvatarProps, ButtonProps } from '../types'
+import type { AvatarProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>
@@ -16,7 +16,7 @@ export interface ChatMessageProps extends UIMessage {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps & { [key: string]: any }
   /**
    * @defaultValue 'naked'
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 997bebe0ae..0d21cf2ab5 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UIMessage, ChatStatus } from 'ai'
 import theme from '#build/ui/chat-messages'
-import type { ButtonProps, ChatMessageProps } from '../types'
+import type { ButtonProps, ChatMessageProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>
@@ -31,7 +31,7 @@ export interface ChatMessagesProps {
    * @defaultValue appConfig.ui.icons.arrowDown
    * @IconifyIcon
    */
-  autoScrollIcon?: string
+  autoScrollIcon?: IconProps['name']
   /**
    * The `user` messages props.
    * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
diff --git a/src/runtime/components/ChatPromptSubmit.vue b/src/runtime/components/ChatPromptSubmit.vue
index a2c843ae70..369e53e430 100644
--- a/src/runtime/components/ChatPromptSubmit.vue
+++ b/src/runtime/components/ChatPromptSubmit.vue
@@ -2,7 +2,7 @@
 import type { ChatStatus } from 'ai'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/chat-prompt-submit'
-import type { ButtonProps, ButtonSlots } from '../types'
+import type { ButtonProps, ButtonSlots, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>
@@ -14,7 +14,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.arrowUp
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The color of the button when the status is `ready`.
    * @defaultValue 'primary'
@@ -30,7 +30,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.stop
    * @IconifyIcon
    */
-  streamingIcon?: string
+  streamingIcon?: IconProps['name']
   /**
    * The color of the button when the status is `streaming`.
    * @defaultValue 'neutral'
@@ -46,7 +46,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.stop
    * @IconifyIcon
    */
-  submittedIcon?: string
+  submittedIcon?: IconProps['name']
   /**
    * The color of the button when the status is `submitted`.
    * @defaultValue 'neutral'
@@ -62,7 +62,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.reload
    * @IconifyIcon
    */
-  errorIcon?: string
+  errorIcon?: IconProps['name']
   /**
    * The color of the button when the status is `error`.
    * @defaultValue 'error'
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index f3a7c77f5a..e615af2886 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -2,6 +2,7 @@
 import type { CheckboxRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/checkbox'
+import type { IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>
@@ -36,13 +37,13 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The icon displayed when the checkbox is indeterminate.
    * @defaultValue appConfig.ui.icons.minus
    * @IconifyIcon
    */
-  indeterminateIcon?: string
+  indeterminateIcon?: IconProps['name']
   class?: any
   ui?: Checkbox['slots']
 }
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 72a51d318a..b525f353f7 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -6,7 +6,7 @@ import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>
@@ -18,7 +18,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   kbds?: KbdProps['value'][] | KbdProps[]
@@ -54,7 +54,7 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
    * The icon displayed when an item is highlighted.
    * @IconifyIcon
    */
-  highlightedIcon?: string
+  highlightedIcon?: IconProps['name']
 }
 
 export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
@@ -68,19 +68,19 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The icon displayed when an item has children.
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -103,7 +103,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Display a button to navigate back in history.
    * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
@@ -115,7 +115,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue appConfig.ui.icons.arrowLeft
    * @IconifyIcon
    */
-  backIcon?: string
+  backIcon?: IconProps['name']
   groups?: G[]
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index 5d165566be..066693da54 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -3,7 +3,7 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/context-menu'
-import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   color?: ContextMenu['variants']['color']
   avatar?: AvatarProps
   content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
@@ -49,20 +49,20 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   /** The content of the menu. */
   content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
   /**
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 3b5120262a..86666f7d18 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -2,7 +2,7 @@
 import type { ContextMenuContentProps as RekaContextMenuContentProps, ContextMenuContentEmits as RekaContextMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type theme from '#build/ui/context-menu'
-import type { AvatarProps, ContextMenuItem, ContextMenuSlots, KbdProps } from '../types'
+import type { AvatarProps, ContextMenuItem, ContextMenuSlots, IconProps, KbdProps } from '../types'
 import type { ArrayOrNested, NestedItem } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -16,15 +16,15 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
   /**
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   class?: any
   ui: { [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string }
   uiOverride?: ContextMenu['slots']
diff --git a/src/runtime/components/DashboardNavbar.vue b/src/runtime/components/DashboardNavbar.vue
index 882e7d2e7b..f8109c2621 100644
--- a/src/runtime/components/DashboardNavbar.vue
+++ b/src/runtime/components/DashboardNavbar.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/dashboard-navbar'
 import type { DashboardContext } from '../utils/dashboard'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>
@@ -17,7 +17,7 @@ export interface DashboardNavbarProps {
    * The icon displayed next to the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   /**
    * Customize the toggle button to open the sidebar.
diff --git a/src/runtime/components/DashboardSearch.vue b/src/runtime/components/DashboardSearch.vue
index 25c27171e2..cb3cdbf857 100644
--- a/src/runtime/components/DashboardSearch.vue
+++ b/src/runtime/components/DashboardSearch.vue
@@ -3,7 +3,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/dashboard-search'
-import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem } from '../types'
+import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>
@@ -14,7 +14,7 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -32,7 +32,7 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * Display a close button in the input (useful when inside a Modal for example).
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -45,7 +45,7 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
    * @defaultValue 'meta_k'
diff --git a/src/runtime/components/DashboardSearchButton.vue b/src/runtime/components/DashboardSearchButton.vue
index 28587e11b5..b75e3c54e3 100644
--- a/src/runtime/components/DashboardSearchButton.vue
+++ b/src/runtime/components/DashboardSearchButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/dashboard-search-button'
-import type { ButtonProps, ButtonSlots, KbdProps, TooltipProps } from '../types'
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>
@@ -12,7 +12,7 @@ export interface DashboardSearchButtonProps {
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The label displayed in the button.
    * @defaultValue t('dashboardSearchButton.label')
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 1e67103e67..c2fd16fd55 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -3,7 +3,7 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/dropdown-menu'
-import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   color?: DropdownMenu['variants']['color']
   avatar?: AvatarProps
   content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
@@ -49,20 +49,20 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index eeefd01907..3f312cbc84 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -3,7 +3,7 @@
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuContentEmits as RekaDropdownMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type theme from '#build/ui/dropdown-menu'
-import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
+import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots, IconProps } from '../types'
 import type { ArrayOrNested, NestedItem, DynamicSlots, MergeTypes } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -17,15 +17,15 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
   /**
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   class?: any
   ui: { [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string }
   uiOverride?: DropdownMenu['slots']
diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index c76ba4c247..2493577c64 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFileDialogReturn } from '@vueuse/core'
 import theme from '#build/ui/file-upload'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>
@@ -20,7 +20,7 @@ export interface FileUploadProps<M extends boolean = false> {
    * @defaultValue appConfig.ui.icons.upload
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   label?: string
   description?: string
   /**
@@ -79,7 +79,7 @@ export interface FileUploadProps<M extends boolean = false> {
    * @defaultValue appConfig.ui.icons.file
    * @IconifyIcon
    */
-  fileIcon?: string
+  fileIcon?: IconProps['name']
   /**
    * Configure the delete button for the file.
    * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
@@ -91,7 +91,7 @@ export interface FileUploadProps<M extends boolean = false> {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  fileDeleteIcon?: string
+  fileDeleteIcon?: IconProps['name']
   class?: any
   ui?: FileUpload['slots']
 }
diff --git a/src/runtime/components/FooterColumns.vue b/src/runtime/components/FooterColumns.vue
index 253bb648bd..5857cb8c7d 100644
--- a/src/runtime/components/FooterColumns.vue
+++ b/src/runtime/components/FooterColumns.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/footer-columns'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>
@@ -11,7 +11,7 @@ export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>
 }
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 18b93353e2..1a1128a8b6 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -4,7 +4,7 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -15,7 +15,7 @@ interface _InputMenuItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   /**
@@ -61,20 +61,20 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The icon displayed to delete a tag.
    * Works only when `multiple` is `true`.
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  deleteIcon?: string
+  deleteIcon?: IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index 4400c4c108..a387d0fa08 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -2,7 +2,7 @@
 import type { NumberFieldRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-number'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>
@@ -35,7 +35,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue appConfig.ui.icons.plus
    * @IconifyIcon
    */
-  incrementIcon?: string
+  incrementIcon?: IconProps['name']
   /** Disable the increment button. */
   incrementDisabled?: boolean
   /**
@@ -48,7 +48,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue appConfig.ui.icons.minus
    * @IconifyIcon
    */
-  decrementIcon?: string
+  decrementIcon?: IconProps['name']
   /** Disable the decrement button. */
   decrementDisabled?: boolean
   autofocus?: boolean
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index c8eca8cc0d..f305558ec7 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema'
 import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
 import theme from '#build/ui/input-tags'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>
@@ -39,7 +39,7 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  deleteIcon?: string
+  deleteIcon?: IconProps['name']
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   class?: any
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 7e1c11de18..0bc75a7010 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -2,7 +2,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/modal'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -44,7 +44,7 @@ export interface ModalProps extends DialogRootProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * When `false`, the modal will not close when clicking outside or pressing escape.
    * @defaultValue true
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 68af27ba04..bd4e47aff0 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -3,7 +3,7 @@
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/navigation-menu'
-import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types'
+import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -20,7 +20,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * Display a badge on the item.
@@ -40,7 +40,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The type of the item.
    * The `label` type is only displayed in `vertical` orientation.
@@ -74,14 +74,14 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   items?: T
   /**
    * @defaultValue 'primary'
diff --git a/src/runtime/components/PageAnchors.vue b/src/runtime/components/PageAnchors.vue
index 7f0aecc9e0..719d431089 100644
--- a/src/runtime/components/PageAnchors.vue
+++ b/src/runtime/components/PageAnchors.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-anchors'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageAnchors = ComponentConfig<typeof theme, AppConfig, 'pageAnchors'>
@@ -11,7 +11,7 @@ export interface PageAnchor extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<PageAnchors['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeading' | 'linkLeadingIcon'>
 }
diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index c078601390..5640a8a891 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-card'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageCard = ComponentConfig<typeof theme, AppConfig, 'pageCard'>
@@ -16,7 +16,7 @@ export interface PageCardProps {
    * The icon displayed above the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/PageFeature.vue b/src/runtime/components/PageFeature.vue
index 2b826c8942..6d289701f1 100644
--- a/src/runtime/components/PageFeature.vue
+++ b/src/runtime/components/PageFeature.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-feature'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageFeature = ComponentConfig<typeof theme, AppConfig, 'pageFeature'>
@@ -16,7 +16,7 @@ export interface PageFeatureProps {
    * The icon displayed next to the title when `orientation` is `horizontal` and above the title when `orientation` is `vertical`.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/PageLinks.vue b/src/runtime/components/PageLinks.vue
index 8aa4915ac3..f98b548311 100644
--- a/src/runtime/components/PageLinks.vue
+++ b/src/runtime/components/PageLinks.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-links'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageLinks = ComponentConfig<typeof theme, AppConfig, 'pageLinks'>
@@ -11,7 +11,7 @@ export interface PageLink extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<PageLinks['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>
 }
diff --git a/src/runtime/components/PageSection.vue b/src/runtime/components/PageSection.vue
index f69ed495c0..03cbc7cac4 100644
--- a/src/runtime/components/PageSection.vue
+++ b/src/runtime/components/PageSection.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-section'
-import type { ButtonProps, PageFeatureProps } from '../types'
+import type { ButtonProps, IconProps, PageFeatureProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>
@@ -20,7 +20,7 @@ export interface PageSectionProps {
    * The icon displayed above the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index 609f715c83..dc74e81c3e 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -2,7 +2,7 @@
 import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/pagination'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>
@@ -18,31 +18,31 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
    * @IconifyIcon
    */
-  firstIcon?: string
+  firstIcon?: IconProps['name']
   /**
    * The icon to use for the previous page control.
    * @defaultValue appConfig.ui.icons.chevronLeft
    * @IconifyIcon
    */
-  prevIcon?: string
+  prevIcon?: IconProps['name']
   /**
    * The icon to use for the next page control.
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  nextIcon?: string
+  nextIcon?: IconProps['name']
   /**
    * The icon to use for the last page control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
    * @IconifyIcon
    */
-  lastIcon?: string
+  lastIcon?: IconProps['name']
   /**
    * The icon to use for the ellipsis control.
    * @defaultValue appConfig.ui.icons.ellipsis
    * @IconifyIcon
    */
-  ellipsisIcon?: string
+  ellipsisIcon?: IconProps['name']
   /**
    * The color of the pagination controls.
    * @defaultValue 'neutral'
diff --git a/src/runtime/components/PricingPlan.vue b/src/runtime/components/PricingPlan.vue
index e2c1caec66..912178ff96 100644
--- a/src/runtime/components/PricingPlan.vue
+++ b/src/runtime/components/PricingPlan.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/pricing-plan'
-import type { BadgeProps, ButtonProps } from '../types'
+import type { BadgeProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PricingPlan = ComponentConfig<typeof theme, AppConfig, 'pricingPlan'>
@@ -12,7 +12,7 @@ type PricingPlanFeature = {
    * @defaultValue appConfig.ui.icons.success
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
 }
 
 export interface PricingPlanProps {
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index ec1dfefaa5..654f19a88a 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -3,7 +3,7 @@ import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectConten
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/select'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ interface SelectItemBase {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   /**
@@ -52,13 +52,13 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index a71b73ff62..1ea5c0dcb7 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -3,7 +3,7 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/select-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ interface _SelectMenuItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   /**
@@ -59,13 +59,13 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index f0f40cb9fa..2d58a14cfe 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -2,7 +2,7 @@
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/separator'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>
@@ -19,7 +19,7 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
    * Display an icon in the middle.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /** Display an avatar in the middle. */
   avatar?: AvatarProps
   /**
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index 1a65d438dc..81ab98df5f 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -2,7 +2,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/slideover'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -44,7 +44,7 @@ export interface SlideoverProps extends DialogRootProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * When `false`, the slideover will not close when clicking outside or pressing escape.
    * @defaultValue true
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index 0bdf112c92..feb2cdf331 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -16,7 +16,7 @@ export interface StepperItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   content?: string
   disabled?: boolean
   class?: any
@@ -75,7 +75,7 @@ import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSepa
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import UIcon from './Icon.vue'
+import UIcon, { type IconProps } from './Icon.vue'
 
 const props = withDefaults(defineProps<StepperProps<T>>(), {
   orientation: 'horizontal',
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index b4e3ad70b2..2369a6aaff 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -27,17 +27,17 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * Display an icon when the switch is checked.
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * Display an icon when the switch is unchecked.
    * @IconifyIcon
    */
-  uncheckedIcon?: string
+  uncheckedIcon?: IconProps['name']
   label?: string
   description?: string
   class?: any
@@ -61,7 +61,7 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
-import UIcon from './Icon.vue'
+import UIcon, { type IconProps } from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 87fdc63b02..33f410a554 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -3,7 +3,7 @@
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tabs'
-import type { AvatarProps, BadgeProps } from '../types'
+import type { AvatarProps, BadgeProps, IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ export interface TabsItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * Display a badge on the item.
diff --git a/src/runtime/components/Timeline.vue b/src/runtime/components/Timeline.vue
index e9f45ac2f6..213656441d 100644
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/timeline'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -12,7 +12,7 @@ export interface TimelineItem {
   date?: string
   title?: string
   description?: string
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   value?: string | number
   slot?: string
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index b75b1a9340..d2f04e2dad 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -2,7 +2,7 @@
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/toast'
-import type { AvatarProps, ButtonProps, ProgressProps } from '../types'
+import type { AvatarProps, ButtonProps, IconProps, ProgressProps } from '../types'
 import type { StringOrVNode } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -19,7 +19,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * @defaultValue 'primary'
@@ -41,7 +41,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index e077f3843a..ecea70ae1b 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -12,12 +12,12 @@ export type TreeItem = {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   label?: string
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   defaultExpanded?: boolean
   disabled?: boolean
   value?: string
@@ -59,19 +59,19 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when a parent node is expanded.
    * @defaultValue appConfig.ui.icons.folderOpen
    * @IconifyIcon
    */
-  expandedIcon?: string
+  expandedIcon?: IconProps['name']
   /**
    * The icon displayed when a parent node is collapsed.
    * @defaultValue appConfig.ui.icons.folder
    * @IconifyIcon
    */
-  collapsedIcon?: string
+  collapsedIcon?: IconProps['name']
   items?: T
   /** The controlled value of the Tree. Can be bind as `v-model`. */
   modelValue?: GetModelValue<T, VK, M>
@@ -107,7 +107,7 @@ import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
-import UIcon from './Icon.vue'
+import UIcon, { type IconProps } from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
diff --git a/src/runtime/components/content/ContentNavigation.vue b/src/runtime/components/content/ContentNavigation.vue
index 8f7dfa0d75..81cca1a738 100644
--- a/src/runtime/components/content/ContentNavigation.vue
+++ b/src/runtime/components/content/ContentNavigation.vue
@@ -3,7 +3,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type { ContentNavigationItem } from '@nuxt/content'
 import theme from '#build/ui/content/content-navigation'
-import type { BadgeProps, LinkProps } from '../../types'
+import type { BadgeProps, IconProps, LinkProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>
@@ -12,7 +12,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * Display a badge on the link.
    * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
@@ -22,7 +22,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   disabled?: boolean
   children?: ContentNavigationLink[]
   defaultOpen?: boolean
@@ -48,7 +48,7 @@ export interface ContentNavigationProps<T extends ContentNavigationLink = Conten
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * @defaultValue 'primary'
    */
diff --git a/src/runtime/components/content/ContentSearch.vue b/src/runtime/components/content/ContentSearch.vue
index 93f4f938de..8c9eee0f81 100644
--- a/src/runtime/components/content/ContentSearch.vue
+++ b/src/runtime/components/content/ContentSearch.vue
@@ -4,7 +4,7 @@ import type { ContentNavigationItem } from '@nuxt/content'
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/content/content-search'
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem } from '../../types'
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>
@@ -15,7 +15,7 @@ export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   children?: ContentSearchLink[]
 }
 
@@ -32,7 +32,7 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
 }
 
 export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
@@ -41,7 +41,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -59,7 +59,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * Display a close button in the input (useful when inside a Modal for example).
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -72,7 +72,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
    * @defaultValue 'meta_k'
diff --git a/src/runtime/components/content/ContentSearchButton.vue b/src/runtime/components/content/ContentSearchButton.vue
index cba5ab9cab..a7f5da41a5 100644
--- a/src/runtime/components/content/ContentSearchButton.vue
+++ b/src/runtime/components/content/ContentSearchButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/content/content-search-button'
-import type { ButtonProps, ButtonSlots, KbdProps, TooltipProps } from '../../types'
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>
@@ -12,7 +12,7 @@ export interface ContentSearchButtonProps {
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The label displayed in the button.
    * @defaultValue t('contentSearchButton.label')
diff --git a/src/runtime/components/content/ContentSurround.vue b/src/runtime/components/content/ContentSurround.vue
index 1914a10dce..f83a82aa88 100644
--- a/src/runtime/components/content/ContentSurround.vue
+++ b/src/runtime/components/content/ContentSurround.vue
@@ -2,6 +2,7 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/content/content-surround'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround'>
@@ -11,7 +12,7 @@ export interface ContentSurroundLink extends ContentNavigationItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>
 }
@@ -27,13 +28,13 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
    * @defaultValue appConfig.ui.icons.arrowLeft
    * @IconifyIcon
    */
-  prevIcon?: string
+  prevIcon?: IconProps['name']
   /**
    * The icon displayed in the next link.
    * @defaultValue appConfig.ui.icons.arrowRight
    * @IconifyIcon
    */
-  nextIcon?: string
+  nextIcon?: IconProps['name']
   surround?: T[]
   class?: any
   ui?: ContentSurround['slots']
@@ -66,10 +67,10 @@ defineSlots<ContentSurroundSlots<T>>()
 
 const appConfig = useAppConfig() as ContentSurround['AppConfig']
 
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?: ContentSurroundLink, icon: string, direction: 'left' | 'right' }>({
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?: ContentSurroundLink, icon: IconProps['name'], direction: 'left' | 'right' }>({
   props: {
     link: Object,
-    icon: String,
+    icon: null as unknown as PropType<IconProps['name']>,
     direction: String as PropType<'left' | 'right'>
   }
 })
diff --git a/src/runtime/components/content/ContentToc.vue b/src/runtime/components/content/ContentToc.vue
index 914bba0b44..1076647d5c 100644
--- a/src/runtime/components/content/ContentToc.vue
+++ b/src/runtime/components/content/ContentToc.vue
@@ -3,6 +3,7 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
 import type { TocLink } from '@nuxt/content'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/content/content-toc'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>
@@ -23,7 +24,7 @@ export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> exte
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The title of the table of contents.
    * @defaultValue t('contentToc.title')
diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index 4c17381738..ddc97ab151 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -21,6 +21,7 @@ import { useAppConfig } from '#imports'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
 import UAccordion from '../Accordion.vue'
+import type { IconProps } from '../../types'
 
 const props = withDefaults(defineProps<ProseAccordionProps>(), {
   type: 'multiple'
@@ -36,7 +37,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: string
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Callout.vue b/src/runtime/components/prose/Callout.vue
index 7876081cee..750400d946 100644
--- a/src/runtime/components/prose/Callout.vue
+++ b/src/runtime/components/prose/Callout.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/callout'
-import type { LinkProps } from '../../types'
+import type { IconProps, LinkProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.prose'>
@@ -9,7 +9,7 @@ type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.pros
 export interface ProseCalloutProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: string
+  icon?: IconProps['name']
   /**
    * @defaultValue 'neutral'
    */
diff --git a/src/runtime/components/prose/Card.vue b/src/runtime/components/prose/Card.vue
index feeb7a2edc..312183d49f 100644
--- a/src/runtime/components/prose/Card.vue
+++ b/src/runtime/components/prose/Card.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/card'
-import type { LinkProps } from '../../types'
+import type { IconProps, LinkProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>
@@ -9,7 +9,7 @@ type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>
 export interface ProseCardProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/prose/CodeCollapse.vue b/src/runtime/components/prose/CodeCollapse.vue
index d1aff031dd..041389ed49 100644
--- a/src/runtime/components/prose/CodeCollapse.vue
+++ b/src/runtime/components/prose/CodeCollapse.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-collapse'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCodeCollapse = ComponentConfig<typeof theme, AppConfig, 'codeCollapse', 'ui.prose'>
@@ -10,7 +11,7 @@ export interface ProseCodeCollapseProps {
    * The icon displayed to toggle the code.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.codeCollapse.name')
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index 6b8622275f..b35f6c0c06 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -30,6 +30,7 @@ import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'rek
 import { useState, useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
 import UCodeIcon from './CodeIcon.vue'
+import type { IconProps } from '../../types'
 
 const props = withDefaults(defineProps<ProseCodeGroupProps>(), {
   defaultValue: '0'
@@ -48,7 +49,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: string
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/CodeIcon.vue b/src/runtime/components/prose/CodeIcon.vue
index a314306bd6..6887d4884f 100644
--- a/src/runtime/components/prose/CodeIcon.vue
+++ b/src/runtime/components/prose/CodeIcon.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-icon'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCodeIcon = ComponentConfig<typeof theme, AppConfig, 'codeIcon', 'ui.prose'>
 
 export interface ProseCodeIconProps {
-  icon?: string
+  icon?: IconProps['name']
   filename?: string
 }
 </script>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index a16786ac38..e2178ba12f 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -37,6 +37,7 @@ import { TreeRoot, TreeItem } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
+import type { IconProps } from '../../types'
 import UCodeIcon from './CodeIcon.vue'
 import UIcon from '../Icon.vue'
 
@@ -59,7 +60,7 @@ const rerenderCount = ref(1)
 const flatItems = computed<{
   index: number
   label: string
-  icon: string
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Collapsible.vue b/src/runtime/components/prose/Collapsible.vue
index f14c0f2526..df87bc4ef6 100644
--- a/src/runtime/components/prose/Collapsible.vue
+++ b/src/runtime/components/prose/Collapsible.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/collapsible'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCollapsible = ComponentConfig<typeof theme, AppConfig, 'collapsible', 'ui.prose'>
@@ -10,7 +11,7 @@ export interface ProseCollapsibleProps {
    * The icon displayed to toggle the collapsible.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.collapsible.name')
diff --git a/src/runtime/components/prose/Pre.vue b/src/runtime/components/prose/Pre.vue
index e02ac6cc93..6c1e0c655d 100644
--- a/src/runtime/components/prose/Pre.vue
+++ b/src/runtime/components/prose/Pre.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/pre'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProsePre = ComponentConfig<typeof theme, AppConfig, 'pre', 'ui.prose'>
 
 export interface ProsePreProps {
-  icon?: string
+  icon?: IconProps['name']
   code?: string
   language?: string
   filename?: string
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index 7550d8f66c..fd088c3fbf 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -32,6 +32,7 @@ import { computed, watch, onMounted, ref, onBeforeUpdate } from 'vue'
 import { useState, useAppConfig } from '#imports'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
+import type { IconProps } from '../../types'
 import UTabs from '../Tabs.vue'
 
 const props = withDefaults(defineProps<ProseTabsProps>(), {
@@ -50,7 +51,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: string
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/composables/useComponentIcons.ts b/src/runtime/composables/useComponentIcons.ts
index 37de0ee2a4..68e0a08c41 100644
--- a/src/runtime/composables/useComponentIcons.ts
+++ b/src/runtime/composables/useComponentIcons.ts
@@ -1,14 +1,14 @@
 import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 import { useAppConfig } from '#imports'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 
 export interface UseComponentIconsProps {
   /**
    * Display an icon based on the `leading` and `trailing` props.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /** Display an avatar on the left side. */
   avatar?: AvatarProps
   /** When `true`, the icon will be displayed on the left side. */
@@ -17,14 +17,14 @@ export interface UseComponentIconsProps {
    * Display an icon on the left side.
    * @IconifyIcon
    */
-  leadingIcon?: string
+  leadingIcon?: IconProps['name']
   /** When `true`, the icon will be displayed on the right side. */
   trailing?: boolean
   /**
    * Display an icon on the right side.
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean
   /**
@@ -32,7 +32,7 @@ export interface UseComponentIconsProps {
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
 }
 
 export function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>) {

From 203117a5b3905157cc0edc09d8d742dcc048f59e Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Sat, 16 Aug 2025 10:20:59 +0700
Subject: [PATCH 03/11] docs(icon): add component icon examples to docs

---
 .../content/examples/icon/IconSvgExample.vue  | 27 +++++++++++++++++++
 docs/content/docs/2.components/icon.md        | 26 +++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/content/examples/icon/IconSvgExample.vue

diff --git a/docs/app/components/content/examples/icon/IconSvgExample.vue b/docs/app/components/content/examples/icon/IconSvgExample.vue
new file mode 100644
index 0000000000..0571c7d61b
--- /dev/null
+++ b/docs/app/components/content/examples/icon/IconSvgExample.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+
+const UIcon = resolveComponent('UIcon')
+
+const IconLightbulb = () => h(
+  'svg',
+  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' },
+  [
+    h(
+      'path',
+      {
+        'fill': 'none',
+        'stroke': 'currentColor',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': 2,
+        'd': 'M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'
+      }
+    )
+  ]
+)
+</script>
+
+<template>
+  <UIcon :name="IconLightbulb" class="size-5" />
+</template>
diff --git a/docs/content/docs/2.components/icon.md b/docs/content/docs/2.components/icon.md
index a3b174febd..1c6923b602 100644
--- a/docs/content/docs/2.components/icon.md
+++ b/docs/content/docs/2.components/icon.md
@@ -1,5 +1,5 @@
 ---
-description: A component to display any icon from Iconify.
+description: A component to display any icon from Iconify or another component.
 category: element
 links:
   - label: Icônes
@@ -27,6 +27,30 @@ It's highly recommended to install the icons collections you need, read more abo
 :::
 ::
 
+## Examples
+
+### SVG
+
+You can also pass a Vue component into the `name` prop:
+
+::component-example
+---
+name: 'icon-svg-example'
+---
+::
+
+You can define your icon components yourself, or use [`unplugin-icons`](https://github.com/unplugin/unplugin-icons) to import them directly from SVG files:
+
+```vue
+<script setup lang="ts">
+import IconLightbulb from '~icons/lucide/lightbulb'
+</script>
+
+<template>
+  <UIcon :name="IconLightbulb" class="size-5" />
+</template>
+```
+
 ## API
 
 ### Props

From be2320df4a091c15d7c9d95d9024ecd3ab0c64cb Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Wed, 27 Aug 2025 21:29:00 +0700
Subject: [PATCH 04/11] chore(Icon): move `IconProps` imports into `<script>`

---
 src/runtime/components/Stepper.vue | 3 ++-
 src/runtime/components/Switch.vue  | 3 ++-
 src/runtime/components/Tree.vue    | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index feb2cdf331..233819e339 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/stepper'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
+import type { IconProps } from './Icon.vue'
 
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>
 
@@ -75,7 +76,7 @@ import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSepa
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import UIcon, { type IconProps } from './Icon.vue'
+import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<StepperProps<T>>(), {
   orientation: 'horizontal',
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 2369a6aaff..38bb8f9f78 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -3,6 +3,7 @@ import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/switch'
 import type { ComponentConfig } from '../types/tv'
+import type { IconProps } from './Icon.vue'
 
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>
 
@@ -61,7 +62,7 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
-import UIcon, { type IconProps } from './Icon.vue'
+import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index ecea70ae1b..956b6f7341 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tree'
 import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
+import type { IconProps } from './Icon.vue'
 
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>
 
@@ -107,7 +108,7 @@ import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
-import UIcon, { type IconProps } from './Icon.vue'
+import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 

From c1230f913ada8de871f5e95b40b845b5f7e03149 Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Wed, 27 Aug 2025 21:43:44 +0700
Subject: [PATCH 05/11] fix(Icon): remove component icon types from prose
 components

---
 src/runtime/components/prose/Accordion.vue    | 3 ++-
 src/runtime/components/prose/Callout.vue      | 3 ++-
 src/runtime/components/prose/Card.vue         | 3 ++-
 src/runtime/components/prose/CodeCollapse.vue | 3 ++-
 src/runtime/components/prose/CodeGroup.vue    | 3 ++-
 src/runtime/components/prose/CodeIcon.vue     | 3 ++-
 src/runtime/components/prose/CodeTree.vue     | 3 ++-
 src/runtime/components/prose/Collapsible.vue  | 3 ++-
 src/runtime/components/prose/Pre.vue          | 3 ++-
 src/runtime/components/prose/Tabs.vue         | 3 ++-
 10 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index ddc97ab151..1298200c67 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/accordion'
 import type { ComponentConfig } from '../../types/tv'
@@ -37,7 +38,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: Exclude<IconProps['name'], Component>
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Callout.vue b/src/runtime/components/prose/Callout.vue
index 750400d946..1af5001133 100644
--- a/src/runtime/components/prose/Callout.vue
+++ b/src/runtime/components/prose/Callout.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/callout'
 import type { IconProps, LinkProps } from '../../types'
@@ -9,7 +10,7 @@ type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.pros
 export interface ProseCalloutProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: IconProps['name']
+  icon?: Exclude<IconProps['name'], Component>
   /**
    * @defaultValue 'neutral'
    */
diff --git a/src/runtime/components/prose/Card.vue b/src/runtime/components/prose/Card.vue
index 312183d49f..1df2b56fa2 100644
--- a/src/runtime/components/prose/Card.vue
+++ b/src/runtime/components/prose/Card.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/card'
 import type { IconProps, LinkProps } from '../../types'
@@ -9,7 +10,7 @@ type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>
 export interface ProseCardProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: IconProps['name']
+  icon?: Exclude<IconProps['name'], Component>
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/prose/CodeCollapse.vue b/src/runtime/components/prose/CodeCollapse.vue
index 041389ed49..0a0e0db83c 100644
--- a/src/runtime/components/prose/CodeCollapse.vue
+++ b/src/runtime/components/prose/CodeCollapse.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-collapse'
 import type { IconProps } from '../../types'
@@ -11,7 +12,7 @@ export interface ProseCodeCollapseProps {
    * The icon displayed to toggle the code.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: IconProps['name']
+  icon?: Exclude<IconProps['name'], Component>
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.codeCollapse.name')
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index b35f6c0c06..77364635a9 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { ComponentConfig } from '../../types/tv'
 import theme from '#build/ui/prose/code-group'
@@ -49,7 +50,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: Exclude<IconProps['name'], Component>
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/CodeIcon.vue b/src/runtime/components/prose/CodeIcon.vue
index 6887d4884f..bc926e1658 100644
--- a/src/runtime/components/prose/CodeIcon.vue
+++ b/src/runtime/components/prose/CodeIcon.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-icon'
 import type { IconProps } from '../../types'
@@ -7,7 +8,7 @@ import type { ComponentConfig } from '../../types/tv'
 type ProseCodeIcon = ComponentConfig<typeof theme, AppConfig, 'codeIcon', 'ui.prose'>
 
 export interface ProseCodeIconProps {
-  icon?: IconProps['name']
+  icon?: Exclude<IconProps['name'], Component>
   filename?: string
 }
 </script>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index e2178ba12f..975c8912be 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-tree'
 import type { ComponentConfig } from '../../types/tv'
@@ -60,7 +61,7 @@ const rerenderCount = ref(1)
 const flatItems = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: Exclude<IconProps['name'], Component>
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Collapsible.vue b/src/runtime/components/prose/Collapsible.vue
index df87bc4ef6..99cd071383 100644
--- a/src/runtime/components/prose/Collapsible.vue
+++ b/src/runtime/components/prose/Collapsible.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/collapsible'
 import type { IconProps } from '../../types'
@@ -11,7 +12,7 @@ export interface ProseCollapsibleProps {
    * The icon displayed to toggle the collapsible.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: IconProps['name']
+  icon?: Exclude<IconProps['name'], Component>
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.collapsible.name')
diff --git a/src/runtime/components/prose/Pre.vue b/src/runtime/components/prose/Pre.vue
index 6c1e0c655d..ceefe992af 100644
--- a/src/runtime/components/prose/Pre.vue
+++ b/src/runtime/components/prose/Pre.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/pre'
 import type { IconProps } from '../../types'
@@ -7,7 +8,7 @@ import type { ComponentConfig } from '../../types/tv'
 type ProsePre = ComponentConfig<typeof theme, AppConfig, 'pre', 'ui.prose'>
 
 export interface ProsePreProps {
-  icon?: IconProps['name']
+  icon?: Exclude<IconProps['name'], Component>
   code?: string
   language?: string
   filename?: string
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index fd088c3fbf..b8cd07e737 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/tabs'
 import type { ComponentConfig } from '../../types/tv'
@@ -51,7 +52,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: Exclude<IconProps['name'], Component>
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions

From 48e6a59ab0fca805fa57b9a5bfbdbbc0c2ed30bd Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Thu, 28 Aug 2025 00:41:19 +0700
Subject: [PATCH 06/11] revert: fix(Icon): remove component icon types from
 prose components

This reverts commit c1230f913ada8de871f5e95b40b845b5f7e03149.
---
 src/runtime/components/prose/Accordion.vue    | 3 +--
 src/runtime/components/prose/Callout.vue      | 3 +--
 src/runtime/components/prose/Card.vue         | 3 +--
 src/runtime/components/prose/CodeCollapse.vue | 3 +--
 src/runtime/components/prose/CodeGroup.vue    | 3 +--
 src/runtime/components/prose/CodeIcon.vue     | 3 +--
 src/runtime/components/prose/CodeTree.vue     | 3 +--
 src/runtime/components/prose/Collapsible.vue  | 3 +--
 src/runtime/components/prose/Pre.vue          | 3 +--
 src/runtime/components/prose/Tabs.vue         | 3 +--
 10 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index 1298200c67..ddc97ab151 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/accordion'
 import type { ComponentConfig } from '../../types/tv'
@@ -38,7 +37,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: Exclude<IconProps['name'], Component>
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Callout.vue b/src/runtime/components/prose/Callout.vue
index 1af5001133..750400d946 100644
--- a/src/runtime/components/prose/Callout.vue
+++ b/src/runtime/components/prose/Callout.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/callout'
 import type { IconProps, LinkProps } from '../../types'
@@ -10,7 +9,7 @@ type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.pros
 export interface ProseCalloutProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: Exclude<IconProps['name'], Component>
+  icon?: IconProps['name']
   /**
    * @defaultValue 'neutral'
    */
diff --git a/src/runtime/components/prose/Card.vue b/src/runtime/components/prose/Card.vue
index 1df2b56fa2..312183d49f 100644
--- a/src/runtime/components/prose/Card.vue
+++ b/src/runtime/components/prose/Card.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/card'
 import type { IconProps, LinkProps } from '../../types'
@@ -10,7 +9,7 @@ type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>
 export interface ProseCardProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: Exclude<IconProps['name'], Component>
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/prose/CodeCollapse.vue b/src/runtime/components/prose/CodeCollapse.vue
index 0a0e0db83c..041389ed49 100644
--- a/src/runtime/components/prose/CodeCollapse.vue
+++ b/src/runtime/components/prose/CodeCollapse.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-collapse'
 import type { IconProps } from '../../types'
@@ -12,7 +11,7 @@ export interface ProseCodeCollapseProps {
    * The icon displayed to toggle the code.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: Exclude<IconProps['name'], Component>
+  icon?: IconProps['name']
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.codeCollapse.name')
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index 77364635a9..b35f6c0c06 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { ComponentConfig } from '../../types/tv'
 import theme from '#build/ui/prose/code-group'
@@ -50,7 +49,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: Exclude<IconProps['name'], Component>
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/CodeIcon.vue b/src/runtime/components/prose/CodeIcon.vue
index bc926e1658..6887d4884f 100644
--- a/src/runtime/components/prose/CodeIcon.vue
+++ b/src/runtime/components/prose/CodeIcon.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-icon'
 import type { IconProps } from '../../types'
@@ -8,7 +7,7 @@ import type { ComponentConfig } from '../../types/tv'
 type ProseCodeIcon = ComponentConfig<typeof theme, AppConfig, 'codeIcon', 'ui.prose'>
 
 export interface ProseCodeIconProps {
-  icon?: Exclude<IconProps['name'], Component>
+  icon?: IconProps['name']
   filename?: string
 }
 </script>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index 975c8912be..e2178ba12f 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-tree'
 import type { ComponentConfig } from '../../types/tv'
@@ -61,7 +60,7 @@ const rerenderCount = ref(1)
 const flatItems = computed<{
   index: number
   label: string
-  icon: Exclude<IconProps['name'], Component>
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Collapsible.vue b/src/runtime/components/prose/Collapsible.vue
index 99cd071383..df87bc4ef6 100644
--- a/src/runtime/components/prose/Collapsible.vue
+++ b/src/runtime/components/prose/Collapsible.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/collapsible'
 import type { IconProps } from '../../types'
@@ -12,7 +11,7 @@ export interface ProseCollapsibleProps {
    * The icon displayed to toggle the collapsible.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: Exclude<IconProps['name'], Component>
+  icon?: IconProps['name']
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.collapsible.name')
diff --git a/src/runtime/components/prose/Pre.vue b/src/runtime/components/prose/Pre.vue
index ceefe992af..6c1e0c655d 100644
--- a/src/runtime/components/prose/Pre.vue
+++ b/src/runtime/components/prose/Pre.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/pre'
 import type { IconProps } from '../../types'
@@ -8,7 +7,7 @@ import type { ComponentConfig } from '../../types/tv'
 type ProsePre = ComponentConfig<typeof theme, AppConfig, 'pre', 'ui.prose'>
 
 export interface ProsePreProps {
-  icon?: Exclude<IconProps['name'], Component>
+  icon?: IconProps['name']
   code?: string
   language?: string
   filename?: string
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index b8cd07e737..fd088c3fbf 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { Component } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/tabs'
 import type { ComponentConfig } from '../../types/tv'
@@ -52,7 +51,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: Exclude<IconProps['name'], Component>
+  icon: IconProps['name']
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions

From 197d0f50e8123d266541a9e7d7e6144a38fdd3bc Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Thu, 28 Aug 2025 00:41:56 +0700
Subject: [PATCH 07/11] fix(Icon): change icon back to string for prose slots

---
 src/runtime/components/prose/Accordion.vue | 3 +--
 src/runtime/components/prose/CodeGroup.vue | 3 +--
 src/runtime/components/prose/CodeTree.vue  | 3 +--
 src/runtime/components/prose/Tabs.vue      | 3 +--
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index ddc97ab151..4c17381738 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -21,7 +21,6 @@ import { useAppConfig } from '#imports'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
 import UAccordion from '../Accordion.vue'
-import type { IconProps } from '../../types'
 
 const props = withDefaults(defineProps<ProseAccordionProps>(), {
   type: 'multiple'
@@ -37,7 +36,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: string
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index b35f6c0c06..6b8622275f 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -30,7 +30,6 @@ import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'rek
 import { useState, useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
 import UCodeIcon from './CodeIcon.vue'
-import type { IconProps } from '../../types'
 
 const props = withDefaults(defineProps<ProseCodeGroupProps>(), {
   defaultValue: '0'
@@ -49,7 +48,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: string
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index e2178ba12f..a16786ac38 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -37,7 +37,6 @@ import { TreeRoot, TreeItem } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
-import type { IconProps } from '../../types'
 import UCodeIcon from './CodeIcon.vue'
 import UIcon from '../Icon.vue'
 
@@ -60,7 +59,7 @@ const rerenderCount = ref(1)
 const flatItems = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: string
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index fd088c3fbf..7550d8f66c 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -32,7 +32,6 @@ import { computed, watch, onMounted, ref, onBeforeUpdate } from 'vue'
 import { useState, useAppConfig } from '#imports'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
-import type { IconProps } from '../../types'
 import UTabs from '../Tabs.vue'
 
 const props = withDefaults(defineProps<ProseTabsProps>(), {
@@ -51,7 +50,7 @@ const rerenderCount = ref(1)
 const items = computed<{
   index: number
   label: string
-  icon: IconProps['name']
+  icon: string
   component: any
 }[]>(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions

From 272b2a967e3eb91ebc301d088e5a177bae52afe7 Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Thu, 28 Aug 2025 00:43:07 +0700
Subject: [PATCH 08/11] chore(Icon): make `IconProps` prettier

---
 src/runtime/components/Stepper.vue | 2 +-
 src/runtime/components/Switch.vue  | 2 +-
 src/runtime/components/Tree.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index 233819e339..02faa9bdfa 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -3,9 +3,9 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/stepper'
+import type { IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
-import type { IconProps } from './Icon.vue'
 
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>
 
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 38bb8f9f78..9e9a590504 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -2,8 +2,8 @@
 import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/switch'
+import type { IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
-import type { IconProps } from './Icon.vue'
 
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>
 
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index 956b6f7341..803d23396e 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -3,9 +3,9 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tree'
+import type { IconProps } from '../types'
 import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
-import type { IconProps } from './Icon.vue'
 
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>
 

From 7d3dc3df293c383930f7510fad7f6a20248148d8 Mon Sep 17 00:00:00 2001
From: rijenkii <me@rijenkii.tk>
Date: Thu, 28 Aug 2025 00:47:02 +0700
Subject: [PATCH 09/11] fix(ContentSurround): revert runtime prop definition of
 LinkTemplate.icon

---
 src/runtime/components/content/ContentSurround.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/content/ContentSurround.vue b/src/runtime/components/content/ContentSurround.vue
index f83a82aa88..29bc2061ed 100644
--- a/src/runtime/components/content/ContentSurround.vue
+++ b/src/runtime/components/content/ContentSurround.vue
@@ -70,7 +70,7 @@ const appConfig = useAppConfig() as ContentSurround['AppConfig']
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?: ContentSurroundLink, icon: IconProps['name'], direction: 'left' | 'right' }>({
   props: {
     link: Object,
-    icon: null as unknown as PropType<IconProps['name']>,
+    icon: String,
     direction: String as PropType<'left' | 'right'>
   }
 })

From fd24871663761d8b4dea3d623969aaca3a9f7cef Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 1 Sep 2025 11:51:48 +0200
Subject: [PATCH 10/11] docs: remove resolve component

---
 docs/app/components/content/examples/icon/IconSvgExample.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/app/components/content/examples/icon/IconSvgExample.vue b/docs/app/components/content/examples/icon/IconSvgExample.vue
index 0571c7d61b..64820133ca 100644
--- a/docs/app/components/content/examples/icon/IconSvgExample.vue
+++ b/docs/app/components/content/examples/icon/IconSvgExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-
-const UIcon = resolveComponent('UIcon')
+import { h } from 'vue'
 
 const IconLightbulb = () => h(
   'svg',

From d6db00409a418dff77d53f07109f43e5abe97919 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 1 Sep 2025 11:52:55 +0200
Subject: [PATCH 11/11] fix: use `object` type instead of `Component` for
 `nuxt-component-meta` graph size

---
 src/runtime/components/Icon.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/runtime/components/Icon.vue b/src/runtime/components/Icon.vue
index 72484709d9..7ad07bf68b 100644
--- a/src/runtime/components/Icon.vue
+++ b/src/runtime/components/Icon.vue
@@ -1,8 +1,6 @@
 <script lang="ts">
-import type { Component } from 'vue'
-
 export interface IconProps {
-  name: string | Component
+  name: string | object
   mode?: 'svg' | 'css'
   size?: string | number
   customize?: (