@sanity/ui 5.0.0-alpha.11 → 5.0.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.12",
   "description": "Sanity UI Library",
   "keywords": [
     "components",

package/src/components/icon/Icon.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import {cloneElement, createElement, isValidElement, type ComponentType, type SVGProps} from 'react'
 
 import {getProps} from '../../utils/getProps'
 import {suffixClassName} from '../../utils/suffixClassName'
@@ -7,18 +8,27 @@ import {type IconProps, iconProps} from './icon.props'
 const iconClassName = suffixClassName('sui-Icon')
 
 /** @public */
-export function Icon({size = 2, ...props}: IconProps) {
-  const {className, style, icon: Component, ...rest} = getProps({size, ...props}, iconProps)
+export function Icon({icon, size = 2, ...props}: IconProps) {
+  const {className, style, ...rest} = getProps({size, ...props}, iconProps)
+  const iconElement = isValidElement(icon) ? icon : null
+  const ariaLabel =
+    props['aria-label'] || (iconElement ? iconElement.props['aria-label'] : undefined)
 
-  return (
-    <Component
-      className={clsx(iconClassName, className)}
-      data-ui="Icon"
-      style={style}
-      aria-hidden={props['aria-label'] ? undefined : true}
-      {...rest}
-    />
-  )
+  const svgProps = {
+    'className': clsx(
+      iconClassName,
+      className,
+      iconElement ? iconElement.props.className : undefined,
+    ),
+    'style': iconElement ? {...iconElement.props.style, ...style} : style,
+    'data-ui': 'Icon',
+    'aria-hidden': ariaLabel ? undefined : true,
+    ...rest,
+  }
+
+  return iconElement
+    ? cloneElement(iconElement, svgProps)
+    : createElement(icon as ComponentType<SVGProps<SVGSVGElement>>, svgProps)
 }
 
 export type {IconProps}

package/src/components/icon/icon.props.ts

@@ -13,7 +13,7 @@ export interface IconProps
   /**
    * The icon component to render.
    */
-  icon: React.ComponentType<SVGProps<SVGSVGElement>>
+  icon: React.ComponentType<SVGProps<SVGSVGElement>> | React.ReactElement<SVGProps<SVGSVGElement>>
   /**
    * Sets icon size.
    */

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha11'
-export const HASH = '8b95a0'
+export const VERSION = '500alpha12'
+export const HASH = '87c63f'