(next) v2.0.0

.eslintrc.json

@@ -24,12 +24,18 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],

.node-version

@@ -1 +1 @@
-20.11.1
+20.12.2

README.md

@@ -6,7 +6,10 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 ## Angular compatibility
 
-Make sure you are using Angular v17.3.0 or greater
+| ngx-sonner | @angular |
+|------------|----------|
+| 2.0.0      | ≥18.0.0  |
+| 1.0.0      | ≥17.3.0  |
 
 ## Quick start
 
@@ -65,6 +68,7 @@ export class AppComponent {
   - [Theme](#theme)
   - [Position](#position)
   - [Expand](#expand)
+  - [Custom Icons](#custom-icons)
   - [Close button](#close-button)
   - [Rich colors](#rich-colors)
   - [Custom offset](#custom-offset)
@@ -306,6 +310,20 @@ Toasts can also be expanded by default through the `expand` prop. You can also c
 <ngx-sonner-toaster expand visibleToasts="9" />
 ```
 
+### Custom icons
+
+You can change the default icons by providing your icons inside the toaster component.
+
+```html
+<ngx-sonner-toaster>
+  <custom-loading-icon loading-icon/>
+  <custom-success-icon success-icon />
+  <custom-error-icon error-icon />
+  <custom-info-icon info-icon />
+  <custom-warning-icon warning-icon />
+</ngx-sonner-toaster>
+```
+
 ### Close button
 
 Add a close button to all toasts that shows on hover by adding the `closeButton` prop.
@@ -340,12 +358,12 @@ You can change the duration of each toast by using the `duration` property, or c
 
 ```ts
 toast('Event has been created', {
-	duration: 10000
+  duration: 10000
 });
 
 // Persisent toast
 toast('Event has been created', {
-	duration: Number.POSITIVE_INFINITY
+  duration: Number.POSITIVE_INFINITY
 });
 ```
 

apps/docs/project.json

@@ -13,7 +13,7 @@
         "outputPath": "dist/apps/docs",
         "index": "apps/docs/src/index.html",
         "browser": "apps/docs/src/main.ts",
-        "polyfills": ["zone.js"],
+        "polyfills": [],
         "tsConfig": "apps/docs/tsconfig.app.json",
         "assets": ["apps/docs/src/favicon.ico", "apps/docs/src/assets"],
         "styles": ["apps/docs/src/styles.css", "node_modules/highlight.js/styles/github.min.css"],

apps/docs/src/app/app.config.ts

@@ -1,7 +1,13 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)],
+  providers: [
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(appRoutes),
+  ],
 };

libs/ngx-sonner/README.md

@@ -6,7 +6,10 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 ## Angular compatibility
 
-Make sure you are using Angular v17.3.0 or greater
+| ngx-sonner | @angular |
+|------------|----------|
+| 2.0.0      | ≥18.0.0  |
+| 1.0.0      | ≥17.3.0  |
 
 ## Quick start
 
@@ -65,6 +68,7 @@ export class AppComponent {
   - [Theme](#theme)
   - [Position](#position)
   - [Expand](#expand)
+  - [Custom Icons](#custom-icons)
   - [Close button](#close-button)
   - [Rich colors](#rich-colors)
   - [Custom offset](#custom-offset)
@@ -306,6 +310,20 @@ Toasts can also be expanded by default through the `expand` prop. You can also c
 <ngx-sonner-toaster expand visibleToasts="9" />
 ```
 
+### Custom icons
+
+You can change the default icons by providing your icons inside the toaster component.
+
+```html
+<ngx-sonner-toaster>
+  <custom-loading-icon loading-icon/>
+  <custom-success-icon success-icon />
+  <custom-error-icon error-icon />
+  <custom-info-icon info-icon />
+  <custom-warning-icon warning-icon />
+</ngx-sonner-toaster>
+```
+
 ### Close button
 
 Add a close button to all toasts that shows on hover by adding the `closeButton` prop.

libs/ngx-sonner/package.json

@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=17.3.0",
-    "@angular/core": ">=17.3.0"
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

libs/ngx-sonner/project.json

@@ -10,7 +10,7 @@
       "executor": "@nx/angular:package",
       "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
       "options": {
-        "project": "libs/ngx-sonner/ng-package.json",
+        "project": "libs/ngx-sonner/ng-package.json"
       },
       "configurations": {
         "production": {

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>

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,