Allow users to customize icons from toaster (#325)

* Allow to style all unstyled toasts with the default prop * Allow to customize icons from toaster
emilkowalski · Feb 3, 2024 · 0c8ce18 · 0c8ce18
1 parent b16aeb6
commit 0c8ce18
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 2 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -57,6 +57,7 @@ const Toast = (props: ToastProps) => {
     loadingIcon: loadingIconProp,
     expandByDefault,
     classNames,
+    icons,
     closeButtonAriaLabel = 'Close toast',
     pauseWhenPageIsHidden,
   } = props;
@@ -213,6 +214,14 @@ 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="sonner-loader" data-visible={toastType === 'loading'}>
@@ -353,8 +362,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}
 
@@ -444,6 +454,7 @@ const Toaster = (props: ToasterProps) => {
     dir = getDocumentDirection(),
     gap,
     loadingIcon,
+    icons,
     containerAriaLabel = 'Notifications',
     pauseWhenPageIsHidden,
   } = props;
@@ -643,6 +654,7 @@ const Toaster = (props: ToasterProps) => {
               .map((toast, index) => (
                 <Toast
                   key={toast.id}
+                  icons={icons}
                   index={index}
                   toast={toast}
                   duration={toastOptions?.duration ?? duration}

diff --git a/src/types.ts b/src/types.ts
@@ -30,6 +30,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;
@@ -99,7 +107,16 @@ 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;
+  icons?: ToastIcons;
   containerAriaLabel?: string;
   pauseWhenPageIsHidden?: boolean;
 }
@@ -128,6 +145,7 @@ export interface ToastProps {
   descriptionClassName?: string;
   loadingIcon?: React.ReactNode;
   classNames?: ToastClassnames;
+  icons?: ToastIcons;
   closeButtonAriaLabel?: string;
   pauseWhenPageIsHidden: boolean;
 }

diff --git a/website/src/pages/styling.mdx b/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 />,
+});
+```
diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx
@@ -65,3 +65,4 @@ Changes the directionality of the toast's text.
 | gap                   |                                                Gap between toasts when expanded                                                 |           `14` |
 | loadingIcon           |                                                Changes the default loading icon                                                 |            `-` |
 | pauseWhenPageIsHidden | Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked. |        `false` |
+| icons                 |                                                    Changes the default icons                                                    |            `-` |