@react-fabric/core 1.0.0-beta.57 → 1.0.0-beta.59

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ export * from "./hooks/useNavigator";
 export * from "./hooks/useOverlayService";
 export * from "./hooks/useResize";
 export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStepper";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";

package/dist/types/overlays/alert/Alert.d.ts

@@ -1,9 +1,21 @@
-import { type ColorState, type Elements, type IconProps } from "../../types";
-export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+export interface AlertProps {
     /**
      * toast type
      */
     type?: "alert" | "confirm" | "prompt";
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon: string;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
     /**
      * toast title
      */
@@ -37,4 +49,4 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     defaultValue?: string;
 }
-export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -1,7 +1,7 @@
-import { type ElementType } from "react";
-import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
-    icon?: string | ElementType<IconProps>;
+import { IconProps } from "../../components/icon/Icon";
+import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
+export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
+    icon?: IconProps;
     /**
      * flyout alignment
      */
@@ -59,4 +59,4 @@ export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Flyout: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, root, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flyout: ({ icon, iconClassName, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, root, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/message/Message.d.ts

@@ -1,5 +1,17 @@
-import { type ColorState, type Elements, type IconProps } from "../../types";
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+export interface MessageProps {
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon: string;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
     /**
      * message title
      */
@@ -17,4 +29,4 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     actions?: Elements<JSX.Element>;
 }
-export declare const Message: ({ title, message, color, icon, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Message: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/modal/Modal.d.ts

@@ -1,7 +1,7 @@
-import { type ElementType } from "react";
-import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
-    icon?: string | ElementType<IconProps>;
+import { IconProps } from "../../components/icon/Icon";
+import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
+export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
+    icon?: IconProps;
     /**
      * header className
      */
@@ -59,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconClassName, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/toast/Toast.d.ts

@@ -1,9 +1,21 @@
-import { type ColorState, type Elements, type IconProps } from "../../types";
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+export interface ToastProps {
     /**
      * toast type
      */
     type?: "alert" | "confirm";
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon: string;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
     /**
      * toast title
      */
@@ -29,4 +41,4 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     cancelLabel?: string;
 }
-export declare const Toast: ({ title, message, color, icon, rtlFlip, actions, onClose, onCloseAll, type, okLabel, cancelLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, onCloseAll, type, okLabel, cancelLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/icons.d.ts

@@ -180,7 +180,7 @@ export declare namespace CoreIcons {
     const mediaAspect = "M19,12H17V15H14V17H19V12M7,9H10V7H5V12H7V9M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H21V19Z";
     const mediaZoomer = "M15 0.004c-4.97 0-9 4.030-9 9 0 1.52 0.38 2.95 1.046 4.206l-6.258 6.256 0.005 0.005c-0.489 0.481-0.794 1.147-0.794 1.887 0 1.462 1.185 2.647 2.647 2.647 0.739 0 1.406-0.304 1.886-0.794l-0.002-0.001 6.256-6.255c1.257 0.668 2.689 1.050 4.213 1.050 4.97 0 9-4.030 9-9s-4.030-9-9-9zM3.596 22.273c-0.241 0.25-0.576 0.407-0.95 0.407-0.731 0-1.324-0.592-1.324-1.323 0-0.373 0.157-0.707 0.407-0.95l-0.007-0.006 6.050-6.050c0.529 0.713 1.159 1.343 1.87 1.874l-6.047 6.047zM15 16.505c-4.142 0-7.5-3.359-7.5-7.5s3.358-7.5 7.5-7.5c4.141 0 7.5 3.358 7.5 7.5s-3.359 7.5-7.5 7.5zM15 3.754c0.206 0 0.375 0.168 0.375 0.375s-0.169 0.375-0.375 0.375c-2.486 0-4.5 2.015-4.5 4.5 0 0.207-0.168 0.375-0.375 0.375s-0.375-0.168-0.375-0.375c0-2.9 2.35-5.25 5.25-5.25z";
     const mediaOrient = "M7.34,6.41L0.86,12.9L7.35,19.38L13.84,12.9L7.34,6.41M3.69,12.9L7.35,9.24L11,12.9L7.34,16.56L3.69,12.9M19.36,6.64C17.61,4.88 15.3,4 13,4V0.76L8.76,5L13,9.24V6C14.79,6 16.58,6.68 17.95,8.05C20.68,10.78 20.68,15.22 17.95,17.95C16.58,19.32 14.79,20 13,20C12.03,20 11.06,19.79 10.16,19.39L8.67,20.88C10,21.62 11.5,22 13,22C15.3,22 17.61,21.12 19.36,19.36C22.88,15.85 22.88,10.15 19.36,6.64Z";
-    const mediaCrop = "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+    const mediaCrop = "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
     const mediaImage = "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z";
     const mediaVideo = "M15,8V16H5V8H15M16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5V7A1,1 0 0,0 16,6Z";
     const mediaAudio = "M17.3,11C17.3,14 14.76,16.1 12,16.1C9.24,16.1 6.7,14 6.7,11H5C5,14.41 7.72,17.23 11,17.72V21H13V17.72C16.28,17.23 19,14.41 19,11M10.8,4.9C10.8,4.24 11.34,3.7 12,3.7C12.66,3.7 13.2,4.24 13.2,4.9L13.19,11.1C13.19,11.76 12.66,12.3 12,12.3C11.34,12.3 10.8,11.76 10.8,11.1M12,14A3,3 0 0,0 15,11V5A3,3 0 0,0 12,2A3,3 0 0,0 9,5V11A3,3 0 0,0 12,14Z";
@@ -202,6 +202,7 @@ export declare namespace CoreIcons {
     const mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
     const mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
     const mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+    const mediaCapture = "M12,10L11.06,12.06L9,13L11.06,13.94L12,16L12.94,13.94L15,13L12.94,12.06L12,10M20,5H16.83L15,3H9L7.17,5H4A2,2 0 0,0 2,7V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V7A2,2 0 0,0 20,5M20,19H4V7H8.05L8.64,6.35L9.88,5H14.12L15.36,6.35L15.95,7H20V19M12,8A5,5 0 0,0 7,13A5,5 0 0,0 12,18A5,5 0 0,0 17,13A5,5 0 0,0 12,8M12,16A3,3 0 0,1 9,13A3,3 0 0,1 12,10A3,3 0 0,1 15,13A3,3 0 0,1 12,16Z";
     const mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
     const mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
     const mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";

package/dist/types/types/index.d.ts

@@ -84,24 +84,6 @@ export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "chi
      */
     as?: AsTag;
 };
-export interface IconProps {
-    /**
-     * svg path / image url
-     */
-    icon?: string;
-    /**
-     * flip icon in rtl
-     */
-    rtlFlip?: boolean;
-    /**
-     * icon background color
-     */
-    iconBg?: ColorType | PaletteType | string;
-    /**
-     * icon color
-     */
-    iconColor?: ColorType | PaletteType | string;
-}
 export interface CollapseProps {
     /**
      * Allow collapsing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.59",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,24 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.12",
-    "@react-fabric/utilities": "^1.0.0-beta.52",
-    "@tailwindcss/postcss": "~4.1.8",
-    "boring-avatars": "^1.11.2",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^4.1.8"
+    "@floating-ui/react": "~0.27.16",
+    "@react-fabric/utilities": "^1.0.0-beta.59",
+    "@tailwindcss/postcss": "~4.1.16",
+    "boring-avatars": "~1.11.2",
+    "classnames": "~2.5.1",
+    "color": "~5.0.2",
+    "resize-observer-polyfill": "~1.5.1",
+    "tailwindcss": "~4.1.16"
   },
   "peerDependencies": {
-    "i18next": "^25.2.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-i18next": "^15.5.2"
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "9b596a0a8d6cecaa8479f80c495b64fb42ce739f"
+  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
 }

package/src/components/avatar/Avatar.tsx

@@ -185,7 +185,7 @@ export const Avatar = ({
   const fallbackAvatar = useMemo(() => {
     if (fallbackIcon) {
       return isSvgPath(fallbackIcon) ? (
-        <svg viewBox={viewBox}>
+        <svg viewBox={viewBox} className="p-[0.125em]">
           <path fill="currentColor" d={fallbackIcon.toString()} />
         </svg>
       ) : (

package/src/components/badge/Badge.tsx

@@ -28,16 +28,11 @@ import {
   type BadgeType,
   type ChildProp,
   type CssProp,
-  type IconProps,
   type RefProp,
 } from "../../types";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
-export interface BadgeProps
-  extends CssProp,
-    RefProp,
-    IconProps,
-    Partial<ChildProp> {
+export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
   /**
    * make wrapper a block element
    */
@@ -50,6 +45,10 @@ export interface BadgeProps
    * badge value
    */
   value?: number | string;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * max value for number display
    */
@@ -124,9 +123,6 @@ export const Badge = ({
   // @ts-expect-error ignore
   forButton = false,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   ...rest
 }: BadgeProps) => {
   const label = useMemo(() => {
@@ -176,9 +172,7 @@ export const Badge = ({
           )}
         >
           {label && <span className="p-1">{label}</span>}
-          {icon && (
-            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-          )}
+          {icon && <Icon {...getIconProps(icon)} />}
         </div>
       )}
     </div>

package/src/components/button/Button.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isNil, isString, mergeRefs } from "@react-fabric/utilities";
+import { isNil, isObject, isString, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Fragment,
@@ -39,12 +39,11 @@ import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays/tooltip/Tooltip";
 import {
-  type ColorState,
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
+  type ColorState,
   type CssProp,
-  type IconProps,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
@@ -54,14 +53,9 @@ import {
 import { getColor } from "../../utils";
 import { AnimationIndicator } from "../animations/Animations";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
-export interface BaseProps
-  extends CssProp,
-    AriaProps,
-    IconProps,
-    RefProp,
-    TestProps {
+export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * primary icon alignment
    */
@@ -78,6 +72,10 @@ export interface BaseProps
    * button color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * button type
    */
@@ -191,11 +189,8 @@ export const Button = <Tag extends React.ElementType = "button">({
   active,
   color = "primary",
   icon,
-  iconBg,
-  iconColor,
   iconAlign = "start",
   altIcon,
-  rtlFlip,
   rounded,
   size,
   disabled,
@@ -323,11 +318,8 @@ export const Button = <Tag extends React.ElementType = "button">({
           {icon && (
             <Icon
               className={"fabric-buttonIcon"}
-              icon={icon}
-              bg={iconBg}
-              color={iconColor}
-              rtlFlip={rtlFlip}
               data-align={iconAlign}
+              {...getIconProps(icon)}
             />
           )}
           {isValidElement(children) && (
@@ -336,7 +328,7 @@ export const Button = <Tag extends React.ElementType = "button">({
           {isString(children) && (
             <label
               className={classNames("fabric-buttonLabel", "truncate")}
-              data-colored-icon={!!iconBg}
+              data-colored-icon={isObject(icon) && "bg" in icon}
             >
               {children}
             </label>

package/src/components/chip/Chip.tsx

@@ -29,7 +29,6 @@ import {
   type ChildProp,
   type ColorType,
   type CssProp,
-  type IconProps,
   type PaletteType,
   type PolymorphicProps,
   type RefProp,
@@ -37,12 +36,11 @@ import {
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface ChipProps
   extends CssProp,
     AriaProps,
-    IconProps,
     TestProps,
     ChildProp<string | ReactElement>,
     RefProp<HTMLDivElement> {
@@ -62,6 +60,10 @@ export interface ChipProps
    * full rounded edges
    */
   rounded?: boolean;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * disabled state
    */
@@ -124,9 +126,6 @@ export const Chip = <Tag extends React.ElementType = "div">({
   color,
   variant,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   disabled,
   onClick,
   onIconClick,
@@ -197,17 +196,14 @@ export const Chip = <Tag extends React.ElementType = "div">({
         <Icon
           data-ref="chipIcon"
           className={classNames("fabric-chipIcon", "m-1 flex-content")}
-          icon={icon}
-          bg={iconBg}
           onClick={onIconClick}
-          color={iconColor}
-          rtlFlip={rtlFlip}
+          {...getIconProps(icon)}
         />
       )}
       {children && (
         <label
           data-ref="chipLabel"
-          className={classNames("fabric-chipLabel", "truncate")}
+          className={classNames("fabric-chipLabel", "truncate flex-1")}
         >
           {children}
         </label>

package/src/components/icon/Icon.tsx

@@ -23,23 +23,27 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { isValidElement, useEffect, useMemo, useState } from "react";
 import {
-  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type RefProp,
   type SizeType,
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
 
-export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+export interface Props extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * svg path / webfont className / 1-4 letter text
    */
-  icon: string;
+  icon: string | JSX.Element;
+  /**
+   * icon image source URL, if failed to load then shows icon
+   */
+  iconSrc?: string;
   /**
    * background color (CSS color / tailwind color)
    */
@@ -75,6 +79,28 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   onClick?: React.MouseEventHandler;
 }
 
+export type IconProps =
+  | string
+  | Pick<
+      Props,
+      | "icon"
+      | "iconSrc"
+      | "bg"
+      | "color"
+      | "size"
+      | "rtlFlip"
+      | "viewBox"
+      | "rounded"
+      | "animate"
+    >;
+
+export const getIconProps = (props: IconProps): Props => {
+  if (typeof props === "string") {
+    return { icon: props };
+  }
+  return props;
+};
+
 const SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
 const SizeMap: KeyValue<string> = {
   xs: "0.625rem",
@@ -116,6 +142,7 @@ const SizeMap: KeyValue<string> = {
 export const Icon = ({
   ref,
   icon,
+  iconSrc,
   bg,
   color,
   size = "",
@@ -127,7 +154,13 @@ export const Icon = ({
   className,
   onClick,
   ...rest
-}: IconProps) => {
+}: Props) => {
+  const [imageFailed, setImageFailed] = useState(false);
+
+  useEffect(() => {
+    setImageFailed(false);
+  }, [iconSrc]);
+
   /** ***************** style map *******************/
   const styles = useMemo(() => {
     const s: KeyValue = {};
@@ -153,6 +186,7 @@ export const Icon = ({
 
   /** ***************** render icon *******************/
   const iconEl = useMemo(() => {
+    if (isValidElement(icon)) return icon;
     if (!isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -203,7 +237,10 @@ export const Icon = ({
       data-clickable={!!onClick}
       data-inner-clickable={!!onClick}
     >
-      {iconEl}
+      {iconSrc && !imageFailed && (
+        <img src={iconSrc} onError={() => setImageFailed(true)} />
+      )}
+      {(!iconSrc || imageFailed) && iconEl}
     </dfn>
   );
 };

package/src/components/index.ts

@@ -47,7 +47,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon } from "./icon/Icon";
+export { Icon, getIconProps } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

package/src/components/menu/MenuItem.tsx

@@ -30,8 +30,9 @@ import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
+import { get } from "http";
 
 /**
  * A menu item component that can be used in a dropdown or menu.
@@ -60,10 +61,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   color = "primary",
   className,
   icon,
-  iconBg,
-  iconColor,
   appendLabel,
-  rtlFlip,
   altIcon,
   id,
   active,
@@ -98,13 +96,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     return (
       <Icon
         className={classNames("fabric-menuIcon", minimal && "minimal")}
-        icon={path ?? ""}
-        bg={iconBg}
-        color={iconColor}
-        rtlFlip={rtlFlip}
+        {...getIconProps(path ?? "")}
       />
     );
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+  }, [icon, minimal, label]);
 
   const Wrapper = useCallback(
     ({ children, ...rest }: AnyObject) => {

package/src/components/menu/types.ts

@@ -29,15 +29,11 @@ import {
   type ChildrenProp,
   type ColorState,
   type CssProp,
-  type IconProps,
   type TestProps,
 } from "../../types";
+import { IconProps } from "../icon/Icon";
 
-export interface MenuItemProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    IconProps {
+export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * menu id passed via menu.onClick
    */
@@ -54,6 +50,10 @@ export interface MenuItemProps
    * menu color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * item active
    */