docs: use lucide-react for RAC example's icons

[reidbarber]

Closes #5292

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Check the examples with updated icons.

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[snowystinger]

screenshots are now a little out of a date, not sure how big a deal that is though

[snowystinger]

actually, went through all of them, this one is a little hard to see in dark mode

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[devongovett]

The Image Grid example still has the spectrum checkmark icon

[devongovett]

actually, went through all of them, this one is a little hard to see in dark mode

@snowystinger I think the point was that it is not selected so it isn't checked. Now they all look checked. 🤔

[snowystinger]

Hmmm... then a different icon or no icon should be used, because in darkmode it just looked like a mistake

[devongovett]

Pretty sure it's always been like that too

[snowystinger]

yeah, it wasn't great before either, which is why I approved it

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

## API Changes

react-aria-components

/react-aria-components:GridListLoadMoreItem

-GridListLoadMoreItem <T extends {}> {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:ListBoxLoadMoreItem

-ListBoxLoadMoreItem <T extends {}> {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TableLoadMoreItem

-TableLoadMoreItem <T extends {}> {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TreeLoadMoreItem

-TreeLoadMoreItem <T extends {}> {
-  children?: ReactNode | ((TreeLoadMoreItemRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: StyleOrFunction<TreeLoadMoreItemRenderProps>
-}

/react-aria-components:GridListLoadMoreItemProps

-GridListLoadMoreItemProps {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:ListBoxLoadMoreItemProps

-ListBoxLoadMoreItemProps {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TableLoadMoreItemProps

-TableLoadMoreItemProps {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TreeLoadMoreItemProps

-TreeLoadMoreItemProps {
-  children?: ReactNode | ((TreeLoadMoreItemRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: StyleOrFunction<TreeLoadMoreItemRenderProps>
-}

/react-aria-components:TreeLoadMoreItemRenderProps

-TreeLoadMoreItemRenderProps {
-  level: number
-}

/react-aria-components:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate?: DropTargetDelegate
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   isDisabled?: boolean
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
   onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
-  renderDragPreview?: (Array<DragItem>) => JSX.Element | {
-    element: JSX.Element
-  x: number
-  y: number
-}
+  renderDragPreview?: (Array<DragItem>) => JSX.Element
   renderDropIndicator?: (DropTarget, Set<Key>, Key) => JSX.Element
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
 }

/react-aria-components:UNSTABLE_GridListLoadingSentinel

+UNSTABLE_GridListLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

+UNSTABLE_ListBoxLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_TableLoadingSentinel

+UNSTABLE_TableLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_TreeLoadingIndicator

+UNSTABLE_TreeLoadingIndicator <T extends {}> {
+  children?: ChildrenOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
+  className?: ClassNameOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
+  style?: StyleOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
+}

---

@react-aria/dnd

/@react-aria/dnd:DragPreviewProps

 DragPreviewProps {
-  children: (Array<DragItem>) => JSX.Element | {
-    element: JSX.Element
-  x: number
-  y: number
-} | null
+  children: (Array<DragItem>) => JSX.Element | null
 }

/@react-aria/dnd:DragPreview

 DragPreview {
-  children: (Array<DragItem>) => JSX.Element | {
-    element: JSX.Element
-  x: number
-  y: number
-} | null
+  children: (Array<DragItem>) => JSX.Element | null
 }

---

@react-aria/utils

/@react-aria/utils:useLoadMoreSentinel

-useLoadMoreSentinel {
-  props: LoadMoreSentinelProps
-  ref: RefObject<HTMLElement | null>
-  returnVal: undefined
-}

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

+UNSTABLE_useLoadMoreSentinel {
+  props: LoadMoreSentinelProps
+  ref: RefObject<HTMLElement | null>
+  returnVal: undefined
+}

---

@react-spectrum/s2

/@react-spectrum/s2:ComboBoxSection

 ComboBoxSection <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:PickerSection

 PickerSection <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:ComboBoxSectionProps

 ComboBoxSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:MenuSectionProps

 MenuSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:PickerSectionProps

 PickerSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

---

[snowystinger]

looks great now!