feat: add support for custom close icon (#481)

emilkowalski · Sep 10, 2024 · 8fe7045 · 8fe7045
1 parent ee55353
commit 8fe7045
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 15 deletions.
diff --git a/src/assets.tsx b/src/assets.tsx
@@ -74,3 +74,20 @@ const ErrorIcon = (
     />
   </svg>
 );
+
+export const CloseIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+);
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { getAsset, Loader } from './assets';
+import { CloseIcon, getAsset, Loader } from './assets';
 import { useIsDocumentHidden } from './hooks';
 import { toast, ToastState } from './state';
 import './styles.css';
@@ -358,20 +358,7 @@ const Toast = (props: ToastProps) => {
           }
           className={cn(classNames?.closeButton, toast?.classNames?.closeButton)}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
+          {icons?.close ?? CloseIcon}
         </button>
       ) : null}
       {toast.jsx || React.isValidElement(toast.title) ? (

diff --git a/src/types.ts b/src/types.ts
@@ -43,6 +43,7 @@ export interface ToastIcons {
   warning?: React.ReactNode;
   error?: React.ReactNode;
   loading?: React.ReactNode;
+  close?: React.ReactNode;
 }
 
 export interface Action {

diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
@@ -169,6 +169,13 @@ export default function Home({ searchParams }: any) {
       >
         ReactNode Description
       </button>
+      <button
+        data-testid="close-button"
+        className="button"
+        onClick={() => toast('Toast with close button', { closeButton: true })}
+      >
+        Render close button
+      </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
       <Toaster
@@ -179,6 +186,25 @@ export default function Home({ searchParams }: any) {
         }}
         theme={theme}
         dir={searchParams.dir || 'auto'}
+        icons={{
+          close:
+            searchParams.customCloseIcon === '' ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            ) : undefined,
+        }}
       />
     </>
   );