From 6c4c8cf1bf59b2877c916ce68ed87dd568ddba1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Gabriel=20Gonz=C3=A1lez=20P=C3=A9rez?=
 <gabriel.gonzalez@monks.com>
Date: Fri, 22 Aug 2025 23:06:43 -0500
Subject: [PATCH 1/2] feat: add custom icon support with container styling for
 toast notifications

---
 src/components/ToastBar.tsx | 27 +++++++++++++++++++++------
 src/core/defaults.ts        |  1 +
 src/types/toast.ts          |  9 +++++++--
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/ToastBar.tsx b/src/components/ToastBar.tsx
index 0be57c0..db5c6f5 100644
--- a/src/components/ToastBar.tsx
+++ b/src/components/ToastBar.tsx
@@ -18,7 +18,7 @@ export const ToastBar: Component<ToastBarProps> = (props) => {
         {
           duration: 350,
           fill: 'forwards',
-          easing: 'cubic-bezier(.21,1.02,.73,1)'
+          easing: 'cubic-bezier(.21,1.02,.73,1)',
         }
       );
     } else {
@@ -30,7 +30,7 @@ export const ToastBar: Component<ToastBarProps> = (props) => {
         {
           duration: 400,
           fill: 'forwards',
-          easing: 'cubic-bezier(.06,.71,.55,1)'
+          easing: 'cubic-bezier(.06,.71,.55,1)',
         }
       );
     }
@@ -46,21 +46,36 @@ export const ToastBar: Component<ToastBarProps> = (props) => {
       }}
     >
       <Switch>
+        <Match when={props.toast.successIcon}>
+          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
+            {props.toast.successIcon}
+          </div>
+        </Match>
+        <Match when={props.toast.errorIcon}>
+          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
+            {props.toast.errorIcon}
+          </div>
+        </Match>
         <Match when={props.toast.icon}>
-          <div style={iconContainer}>{props.toast.icon}</div>
+          <div style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>{props.toast.icon}</div>
+        </Match>
+        <Match when={props.toast.loadingIcon}>
+          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
+            {props.toast.loadingIcon}
+          </div>
         </Match>
         <Match when={props.toast.type === 'loading'}>
-          <div style={iconContainer}>
+          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
             <Loader {...props.toast.iconTheme} />
           </div>
         </Match>
         <Match when={props.toast.type === 'success'}>
-          <div style={iconContainer}>
+          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
             <Success {...props.toast.iconTheme} />
           </div>
         </Match>
         <Match when={props.toast.type === 'error'}>
-          <div style={iconContainer}>
+          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
             <Error {...props.toast.iconTheme} />
           </div>
         </Match>
diff --git a/src/core/defaults.ts b/src/core/defaults.ts
index 4126cd8..250d150 100644
--- a/src/core/defaults.ts
+++ b/src/core/defaults.ts
@@ -22,6 +22,7 @@ export const defaultToastOptions: Required<ToastOptions> = {
   style: {},
   position: 'top-right',
   iconTheme: {},
+  iconContainerStyle: {},
 };
 
 export const defaultToasterOptions: ToasterProps = {
diff --git a/src/types/toast.ts b/src/types/toast.ts
index 69ec6e0..e720026 100644
--- a/src/types/toast.ts
+++ b/src/types/toast.ts
@@ -24,12 +24,17 @@ export interface Toast {
   type: ToastType;
   id: string;
   message: ValueOrFunction<Renderable, Toast>;
-  icon?: Renderable;
   duration?: number;
   pauseDuration: number;
   paused: boolean;
   position?: ToastPosition;
 
+  iconContainerStyle?: JSX.CSSProperties;
+  icon?: Renderable;
+  successIcon?: Renderable;
+  errorIcon?: Renderable;
+  loadingIcon?: Renderable;
+
   ariaProps: {
     role: 'status' | 'alert';
     'aria-live': 'assertive' | 'off' | 'polite';
@@ -50,7 +55,7 @@ export interface Toast {
 export type ToastOptions = Partial<
   Pick<
     Toast,
-    'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'unmountDelay' | 'iconTheme'
+    'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'unmountDelay' | 'iconTheme' | 'iconContainerStyle'
   >
 >;
 

From 9fce5d873ce71c8df83047d3443aafcedede978e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Gabriel=20Gonz=C3=A1lez=20P=C3=A9rez?=
 <gabriel.gonzalez@monks.com>
Date: Fri, 22 Aug 2025 23:13:46 -0500
Subject: [PATCH 2/2] feat: add custom icon support for success, error, and
 loading toast types

---
 README.md            | 22 ++++++++++++++++++++++
 src/core/defaults.ts |  3 +++
 src/types/toast.ts   |  2 +-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7211e56..6199eb5 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,10 @@ toast('This is a simple toast!', {
     primary: '#fff',
     secondary: '#000',
   },
+  // Override icons for specific toast types
+  successIcon: '🎉',
+  errorIcon: '🔥',
+  loadingIcon: '⏳',
   // Aria Props - Supports all ARIA props
   aria: {
     role: 'status',
@@ -124,6 +128,24 @@ toast.error('Something went wrong!');
 
 Creates a notification with an animated error icon. Color accents can be themed with the `iconTheme` option.
 
+##### Customizing Icons by Type
+
+You can override the default icons for `success`, `error`, and `loading` toasts by providing the `successIcon`, `errorIcon`, and `loadingIcon` options respectively. These options accept a `Renderable` (JSX Element, string, or null).
+
+```jsx
+toast.success('This is a success toast with a custom icon!', {
+  successIcon: '✅',
+});
+
+toast.error('This is an error toast with a custom icon!', {
+  errorIcon: '❌',
+});
+
+toast.loading('This is a loading toast with a custom icon!', {
+  loadingIcon: '...',
+});
+```
+
 ##### Loading
 
 ```js
diff --git a/src/core/defaults.ts b/src/core/defaults.ts
index 250d150..039bd05 100644
--- a/src/core/defaults.ts
+++ b/src/core/defaults.ts
@@ -23,6 +23,9 @@ export const defaultToastOptions: Required<ToastOptions> = {
   position: 'top-right',
   iconTheme: {},
   iconContainerStyle: {},
+  successIcon: '',
+  errorIcon: '',
+  loadingIcon: '',
 };
 
 export const defaultToasterOptions: ToasterProps = {
diff --git a/src/types/toast.ts b/src/types/toast.ts
index e720026..72a2be5 100644
--- a/src/types/toast.ts
+++ b/src/types/toast.ts
@@ -55,7 +55,7 @@ export interface Toast {
 export type ToastOptions = Partial<
   Pick<
     Toast,
-    'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'unmountDelay' | 'iconTheme' | 'iconContainerStyle'
+    'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'unmountDelay' | 'iconTheme' | 'iconContainerStyle' | 'successIcon' | 'errorIcon' | 'loadingIcon'
   >
 >;