feat: add icons prop to <Toaster />

src/index.tsx

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

src/types.ts

@@ -29,6 +29,14 @@ 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;
@@ -95,8 +103,17 @@ 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 {
@@ -123,6 +140,7 @@ export interface ToastProps {
   descriptionClassName?: string;
   loadingIcon?: React.ReactNode;
   classNames?: ToastClassnames;
+  icons?: ToastIcons;
   closeButtonAriaLabel?: string;
 }
 

website/src/pages/styling.mdx

@@ -75,3 +75,27 @@ 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` |
-| loadingIcon   |                                  Changes the default loading icon                                  |            `-` |
+| icons         |                                     Changes the default icons                                      |            `-` |