feat: add custom icon support with container styling for toast notifications

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

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>

src/core/defaults.ts

@@ -22,6 +22,10 @@ export const defaultToastOptions: Required<ToastOptions> = {
   style: {},
   position: 'top-right',
   iconTheme: {},
+  iconContainerStyle: {},
+  successIcon: '',
+  errorIcon: '',
+  loadingIcon: '',
 };
 
 export const defaultToasterOptions: ToasterProps = {

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' | 'successIcon' | 'errorIcon' | 'loadingIcon'
   >
 >;