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

package/src/overlays/flyout/Flyout.tsx

@@ -32,14 +32,9 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  isValidElement,
-  useCallback,
-  useEffect,
-  type ElementType,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -47,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 
-export interface FlyoutProps
-  extends AriaProps,
-    TestProps,
-    Omit<IconProps, "icon">,
-    ChildrenProp {
-  icon?: string | ElementType<IconProps>;
+export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * flyout alignment
    */
@@ -118,10 +108,7 @@ export interface FlyoutProps
 
 export const Flyout = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   closeOnClick,
@@ -236,11 +223,8 @@ export const Flyout = ({
             >
               {isString(icon) && (
                 <Icon
-                  icon={icon}
-                  bg={iconBg}
-                  color={iconColor}
                   className={classNames(iconClassName, "p-1")}
-                  rtlFlip={rtlFlip}
+                  {...getIconProps(icon)}
                 />
               )}
               {isValidElement(icon) && icon}

package/src/overlays/message/Message.tsx

@@ -24,10 +24,22 @@
 import classNames from "classnames";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements } from "../../types";
 import { getColor } from "../../utils";
 
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+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
    */
@@ -51,6 +63,7 @@ export const Message = ({
   message,
   color,
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -87,7 +100,9 @@ export const Message = ({
       }}
       ref={elRef}
     >
-      {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}
+      {icon && (
+        <Icon icon={icon} iconSrc={iconSrc} size="md" rtlFlip={rtlFlip} />
+      )}
       {title && <div className="font-medium">{title}</div>}
       <div className="truncate flex-initial">{message}</div>
       {actions && (

package/src/overlays/modal/Modal.tsx

@@ -32,14 +32,9 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  type ElementType,
-  isValidElement,
-  useCallback,
-  useEffect,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -47,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 
-export interface ModalProps
-  extends AriaProps,
-    TestProps,
-    Omit<IconProps, "icon">,
-    ChildrenProp {
-  icon?: string | ElementType<IconProps>;
+export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * header className
    */
@@ -118,10 +108,7 @@ export interface ModalProps
 
 export const Modal = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   headerClassName,
@@ -226,11 +213,8 @@ export const Modal = ({
               >
                 {isString(icon) && (
                   <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
                     className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
+                    {...getIconProps(icon)}
                   />
                 )}
                 {isValidElement(icon) && icon}

package/src/overlays/toast/Toast.tsx

@@ -27,15 +27,27 @@ import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+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
    */
@@ -67,6 +79,7 @@ export const Toast = ({
   message,
   color = "primary",
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -82,7 +95,13 @@ export const Toast = ({
   const iconType = useMemo(() => {
     if (icon)
       return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
+        <Icon
+          icon={icon}
+          iconSrc={iconSrc}
+          size="md"
+          rtlFlip={rtlFlip}
+          color={color + "-600"}
+        />
       );
     switch (color) {
       case "danger":
@@ -99,7 +118,7 @@ export const Toast = ({
           />
         );
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
 
   const elRef = useRef<HTMLDivElement>(null);
   const handleClose = useCallback(

package/src/types/global.d.ts

@@ -45,6 +45,14 @@ declare module "*.png" {
   const content: any;
   export default content;
 }
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
 declare module "*.svg" {
   const content: any;
   export default content;

package/src/types/icons.ts

@@ -397,7 +397,7 @@ export namespace CoreIcons {
   export 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";
   export const mediaCrop =
-    "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+    "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
   export 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";
   export const mediaVideo =
@@ -437,6 +437,8 @@ export namespace CoreIcons {
     "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";
   export 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";
+  export 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";
 
   export 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";

package/src/types/index.ts

@@ -390,25 +390,6 @@ export type PolymorphicProps<AsTag extends ReactTag> = Omit<
   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