fix: allow to render custom icons for toasts

fixes #10
tutkli · Jun 3, 2024 · 59c1aca · 59c1aca
1 parent d1f02d0
commit 59c1aca
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -79,13 +79,21 @@ import { Position, Theme, ToasterProps } from './types';
                 [classes]="toastOptions().classes ?? {}"
                 [duration]="toastOptions().duration ?? duration()"
                 [unstyled]="toastOptions().unstyled ?? false">
-                <ngx-sonner-loader
-                  [isVisible]="toast.type === 'loading'"
-                  loading-icon />
-                <ngx-sonner-icon type="success" success-icon />
-                <ngx-sonner-icon type="error" error-icon />
-                <ngx-sonner-icon type="warning" warning-icon />
-                <ngx-sonner-icon type="info" info-icon />
+                <ng-content select="[loading-icon]" loading-icon>
+                  <ngx-sonner-loader [isVisible]="toast.type === 'loading'" />
+                </ng-content>
+                <ng-content select="[success-icon]" success-icon>
+                  <ngx-sonner-icon type="success" />
+                </ng-content>
+                <ng-content select="[error-icon]" error-icon>
+                  <ngx-sonner-icon type="error" />
+                </ng-content>
+                <ng-content select="[warning-icon]" warning-icon>
+                  <ngx-sonner-icon type="warning" />
+                </ng-content>
+                <ng-content select="[info-icon]" info-icon>
+                  <ngx-sonner-icon type="info" />
+                </ng-content>
               </ngx-sonner-toast>
             }
           </ol>

diff --git a/libs/ngx-sonner/src/tests/toaster-test.component.ts b/libs/ngx-sonner/src/tests/toaster-test.component.ts
@@ -18,7 +18,24 @@ export type ToastTestInputs = {
     <ngx-sonner-toaster
       [dir]="dir()"
       [theme]="theme()"
-      [closeButton]="closeButton()" />
+      [closeButton]="closeButton()">
+      <svg
+        success-icon
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-badge-check">
+        <path
+          d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
+        <path d="m9 12 2 2 4-4" />
+      </svg>
+    </ngx-sonner-toaster>
     <button data-testid="trigger" (click)="onClick()">Trigger</button>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/libs/ngx-sonner/src/tests/toaster.spec.ts b/libs/ngx-sonner/src/tests/toaster.spec.ts
@@ -284,4 +284,16 @@ describe('Toaster', () => {
     const closeButton = container.querySelector('[data-close-button]');
     expect(closeButton).not.toBeNull();
   });
+
+  it('should render the custom icon when provided', async () => {
+    const { user, trigger, container } = await setup({
+      callback: toast => toast.success('Hello world'),
+    });
+    await user.click(trigger);
+    const icon = container.querySelector('[data-icon]');
+    expect(icon).not.toBeNull();
+    expect(icon).toContainHTML(
+      '<svg success-icon xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>'
+    );
+  });
 });