chore(components): add @IconifyIcon tag on icon properties (#3445)

src/runtime/components/Accordion.vue

@@ -12,7 +12,13 @@ const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion |
 
 export interface AccordionItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   slot?: string
   content?: string
@@ -31,6 +37,7 @@ export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible
   /**
    * The icon displayed on the right side of the trigger.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**

src/runtime/components/Alert.vue

@@ -20,6 +20,9 @@ export interface AlertProps {
   as?: any
   title?: string
   description?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   color?: AlertVariants['color']
@@ -42,6 +45,7 @@ export interface AlertProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   class?: any

src/runtime/components/Avatar.vue

@@ -19,6 +19,9 @@ export interface AvatarProps {
   as?: any
   src?: string
   alt?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   text?: string
   size?: AvatarVariants['size']

src/runtime/components/Breadcrumb.vue

@@ -27,6 +27,7 @@ export interface BreadcrumbProps<T> {
   /**
    * The icon to use as a separator.
    * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
    */
   separatorIcon?: string
   /**

src/runtime/components/Calendar.vue

@@ -29,21 +29,25 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
   /**
    * The icon to use for the next year control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   * @IconifyIcon
    */
   nextYearIcon?: string
   /**
    * The icon to use for the next month control.
    * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
    */
   nextMonthIcon?: string
   /**
    * The icon to use for the previous year control.
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   * @IconifyIcon
    */
   prevYearIcon?: string
   /**
    * The icon to use for the previous month control.
    * @defaultValue appConfig.ui.icons.chevronLeft
+   * @IconifyIcon
    */
   prevMonthIcon?: string
   color?: CalendarVariants['color']

src/runtime/components/Carousel.vue

@@ -35,6 +35,7 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
   /**
    * The icon displayed in the prev button.
    * @defaultValue appConfig.ui.icons.arrowLeft
+   * @IconifyIcon
    */
   prevIcon?: string
   /**
@@ -45,6 +46,7 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
   /**
    * The icon displayed in the next button.
    * @defaultValue appConfig.ui.icons.arrowRight
+   * @IconifyIcon
    */
   nextIcon?: string
   /**

src/runtime/components/Checkbox.vue

@@ -30,6 +30,7 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
   /**
    * The icon displayed when the checkbox is indeterminate.
    * @defaultValue appConfig.ui.icons.minus
+   * @IconifyIcon
    */
   indeterminateIcon?: string
   class?: any

src/runtime/components/CommandPalette.vue

@@ -42,7 +42,10 @@ export interface CommandPaletteGroup<T> {
   ignoreFilter?: boolean
   /** Filter group items after the search happened. */
   postFilter?: (searchTerm: string, items: T[]) => T[]
-  /** The icon displayed when an item is highlighted. */
+  /**
+   * The icon displayed when an item is highlighted.
+   * @IconifyIcon
+   */
   highlightedIcon?: string
 }
 
@@ -60,6 +63,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**
@@ -82,6 +86,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   groups?: G[]

src/runtime/components/ContextMenu.vue

@@ -43,17 +43,20 @@ export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
   /**
    * The icon displayed when an item is checked.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   checkedIcon?: string
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
   /**
    * 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
   /** The content of the menu. */

src/runtime/components/ContextMenuContent.vue

@@ -11,8 +11,17 @@ interface ContextMenuContentProps<T> extends Omit<RekaContextMenuContentProps, '
   portal?: boolean
   sub?: boolean
   labelKey: string
+  /**
+   * @IconifyIcon
+   */
   checkedIcon?: string
+  /**
+   * @IconifyIcon
+   */
   loadingIcon?: string
+  /**
+   * @IconifyIcon
+   */
   externalIcon?: boolean | string
   class?: any
   ui: typeof _contextMenu

src/runtime/components/DropdownMenu.vue

@@ -43,17 +43,20 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
   /**
    * The icon displayed when an item is checked.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   checkedIcon?: string
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
   /**
    * 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
   /**

src/runtime/components/DropdownMenuContent.vue

@@ -12,8 +12,17 @@ interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps,
   portal?: boolean
   sub?: boolean
   labelKey: string
+  /**
+   * @IconifyIcon
+   */
   checkedIcon?: string
+  /**
+   * @IconifyIcon
+   */
   loadingIcon?: string
+  /**
+   * @IconifyIcon
+   */
   externalIcon?: boolean | string
   class?: any
   ui: typeof _dropdownMenu

src/runtime/components/InputMenu.vue

@@ -49,17 +49,20 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**
    * The icon displayed to delete a tag.
    * Works only when `multiple` is `true`.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   deleteIcon?: string
   /**

src/runtime/components/InputNumber.vue

@@ -40,6 +40,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   /**
    * The icon displayed to increment the value.
    * @defaultValue appConfig.ui.icons.plus
+   * @IconifyIcon
    */
   incrementIcon?: string
   /**
@@ -50,6 +51,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   /**
    * The icon displayed to decrement the value.
    * @defaultValue appConfig.ui.icons.minus
+   * @IconifyIcon
    */
   decrementIcon?: string
   autofocus?: boolean

src/runtime/components/Modal.vue

@@ -44,6 +44,7 @@ export interface ModalProps extends DialogRootProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   /**

src/runtime/components/NavigationMenu.vue

@@ -26,6 +26,9 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
    */
   badge?: string | number | BadgeProps
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   /**
    * The type of the item.
@@ -50,12 +53,14 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * 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
   items?: T

src/runtime/components/Pagination.vue

@@ -20,21 +20,25 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
   /**
    * The icon to use for the first page control.
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   * @IconifyIcon
    */
   firstIcon?: string
   /**
    * The icon to use for the previous page control.
    * @defaultValue appConfig.ui.icons.chevronLeft
+   * @IconifyIcon
    */
   prevIcon?: string
   /**
    * The icon to use for the next page control.
    * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
    */
   nextIcon?: string
   /**
    * The icon to use for the last page control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   * @IconifyIcon
    */
   lastIcon?: string
   /**
@@ -45,6 +49,7 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
   /**
    * The color of the pagination controls.
    * @defaultValue 'neutral'
+   * @IconifyIcon
    */
   color?: ButtonProps['color']
   /**

src/runtime/components/Select.vue

@@ -39,11 +39,13 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**

src/runtime/components/SelectMenu.vue

@@ -47,11 +47,13 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**
@@ -62,6 +64,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false
+   * @IconifyIcon
    */
   arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
   /**

src/runtime/components/Slideover.vue

@@ -43,6 +43,7 @@ export interface SlideoverProps extends DialogRootProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   /**

src/runtime/components/Switch.vue

@@ -26,11 +26,18 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
   /**
    * The icon when the `loading` prop is `true`.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
-  /** Display an icon when the switch is checked. */
+  /**
+   * Display an icon when the switch is checked.
+   * @IconifyIcon
+   */
   checkedIcon?: string
-  /** Display an icon when the switch is unchecked. */
+  /**
+   * Display an icon when the switch is unchecked.
+   * @IconifyIcon
+   */
   uncheckedIcon?: string
   label?: string
   description?: string

src/runtime/components/Toast.vue

@@ -42,6 +42,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   class?: any

src/runtime/components/Tree.vue

@@ -14,8 +14,14 @@ const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
 type TreeVariants = VariantProps<typeof tree>
 
 export type TreeItem = {
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   label?: string
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   defaultExpanded?: boolean
   disabled?: boolean
@@ -47,16 +53,19 @@ export interface TreeProps<T extends TreeItem, M extends boolean = false, K exte
   /**
    * The icon displayed on the right side of a parent node.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when a parent node is expanded.
    * @defaultValue appConfig.ui.icons.folderOpen
+   * @IconifyIcon
    */
   expandedIcon?: string
   /**
    * The icon displayed when a parent node is collapsed.
    * @defaultValue appConfig.ui.icons.folder
+   * @IconifyIcon
    */
   collapsedIcon?: string
   items?: T[]

src/runtime/composables/useComponentIcons.ts

@@ -3,23 +3,33 @@ import { useAppConfig } from '#imports'
 import type { AvatarProps } from '../types'
 
 export interface UseComponentIconsProps {
-  /** Display an icon based on the `leading` and `trailing` props. */
+  /**
+   * Display an icon based on the `leading` and `trailing` props.
+   * @IconifyIcon
+   */
   icon?: string
   /** Display an avatar on the left side. */
   avatar?: AvatarProps
   /** When `true`, the icon will be displayed on the left side. */
   leading?: boolean
-  /** Display an icon on the left side. */
+  /**
+   * Display an icon on the left side.
+   * @IconifyIcon
+   */
   leadingIcon?: string
   /** When `true`, the icon will be displayed on the right side. */
   trailing?: boolean
-  /** Display an icon on the right side. */
+  /**
+   * Display an icon on the right side.
+   * @IconifyIcon
+   */
   trailingIcon?: string
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean
   /**
    * The icon when the `loading` prop is `true`.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
 }