Fix types of toaster icons (#294)

src/index.tsx

@@ -56,7 +56,6 @@ const Toast = (props: ToastProps) => {
     loadingIcon: loadingIconProp,
     expandByDefault,
     classNames,
-    icons,
     closeButtonAriaLabel = 'Close toast',
   } = props;
   const [mounted, setMounted] = React.useState(false);
@@ -194,13 +193,6 @@ const Toast = (props: ToastProps) => {
   }, [deleteToast, toast.delete]);
 
   function getLoadingIcon() {
-    if (icons.loading) {
-      return (
-        <div className="loader" data-visible={toastType === 'loading'}>
-          {icons.loading}
-        </div>
-      );
-    }
     if (loadingIconProp) {
       return (
         <div className="loader" data-visible={toastType === 'loading'}>
@@ -340,9 +332,8 @@ const Toast = (props: ToastProps) => {
         <>
           {toastType || toast.icon || toast.promise ? (
             <div data-icon="">
-              {toast.promise || toastType === 'loading'
-                ? toast.icon || icons.loading || getLoadingIcon()
-                : toast.icon || icons?.[toastType] || getAsset(toastType)}
+              {(toast.promise || toast.type === 'loading') && !toast.icon ? getLoadingIcon() : null}
+              {toast.icon || getAsset(toastType)}
             </div>
           ) : null}
 
@@ -432,7 +423,6 @@ const Toaster = (props: ToasterProps) => {
     dir = getDocumentDirection(),
     gap,
     loadingIcon,
-    icons,
     containerAriaLabel = 'Notifications',
   } = props;
   const [toasts, setToasts] = React.useState<ToastT[]>([]);
@@ -653,7 +643,6 @@ const Toaster = (props: ToasterProps) => {
                   expandByDefault={expand}
                   gap={gap}
                   loadingIcon={loadingIcon}
-                  icons={icons}
                   expanded={expanded}
                 />
               ))}

src/types.ts

@@ -29,14 +29,6 @@ export interface ToastClassnames {
   default?: string;
 }
 
-export interface ToastIcons {
-  success?: React.ReactNode;
-  info?: React.ReactNode;
-  warning?: React.ReactNode;
-  error?: React.ReactNode;
-  loading?: React.ReactNode;
-}
-
 export interface ToastT {
   id: number | string;
   title?: string | React.ReactNode;
@@ -103,17 +95,8 @@ export interface ToasterProps {
   style?: React.CSSProperties;
   offset?: string | number;
   dir?: 'rtl' | 'ltr' | 'auto';
-  /**
-   * @deprecated Please use the `icons` prop instead:
-   * ```jsx
-   * <Toaster
-   *   icons={{ loading: <LoadingIcon /> }}
-   * />
-   * ```
-   */
   loadingIcon?: React.ReactNode;
   containerAriaLabel?: string;
-  icons?: ToastIcons;
 }
 
 export interface ToastProps {
@@ -140,7 +123,6 @@ export interface ToastProps {
   descriptionClassName?: string;
   loadingIcon?: React.ReactNode;
   classNames?: ToastClassnames;
-  icons?: ToastIcons;
   closeButtonAriaLabel?: string;
 }
 

website/src/pages/styling.mdx

@@ -75,27 +75,3 @@ Styling per toast type is also possible.
   }}
 />
 ```
-
-## Changing Icons
-
-You can change the default icons using the `icons` prop:
-
-```jsx
-<Toaster
-  icons={{
-    success: <SuccessIcon />,
-    info: <InfoIcon />,
-    warning: <WarningIcon />,
-    error: <ErrorIcon />,
-    loading: <LoadingIcon />,
-  }}
-/>
-```
-
-You can also set an icon for each toast:
-
-```jsx
-toast('Hello World', {
-  icon: <Icon />
-});
-```

website/src/pages/toaster.mdx

@@ -63,4 +63,4 @@ Changes the directionality of the toast's text.
 | invert        |                             Dark toasts in light mode and vice versa.                              |        `false` |
 | toastOptions  | These will act as default options for all toasts. See [toast()](/toast) for all available options. |         `4000` |
 | gap           |                                  Gap between toasts when expanded                                  |           `14` |
-| icons         |                                     Changes the default icons                                      |            `-` |
+| loadingIcon   |                                  Changes the default loading icon                                  |            `-` |