feat: change icon package

apps/www/package.json

@@ -14,7 +14,7 @@
     "@analogjs/astro-angular": "^1.6.4",
     "@angular-devkit/build-angular": "^18.1.2",
     "@angular/animations": "^18.1.2",
-    "@angular/cdk": "^18.1.1",
+    "@angular/cdk": "^18.1.2",
     "@angular/common": "^18.1.2",
     "@angular/compiler": "^18.1.2",
     "@angular/compiler-cli": "^18.1.2",
@@ -27,13 +27,14 @@
     "@astrojs/starlight": "^0.25.2",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
+    "@ng-icons/core": "^29.0.0",
+    "@ng-icons/radix-icons": "^29.0.0",
     "@pagefind/default-ui": "^1.1.0",
     "@radix-ng/primitives": "^0.8.2",
     "astro": "^4.12.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lodash.template": "^4.5.0",
-    "lucide-angular": "^0.414.0",
     "rxjs": "^7.8.1",
     "sharp": "^0.32.5",
     "tailwind-merge": "^2.4.0",

apps/www/src/registry/default/ui/breadcrumb.directive.ts

@@ -1,6 +1,7 @@
 import { Component, computed, Directive, input } from "@angular/core";
 
-import { LucideAngularModule } from "lucide-angular";
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { radixChevronRight, radixDotsHorizontal } from "@ng-icons/radix-icons";
 
 import { cn } from "@/lib/utils";
 
@@ -82,15 +83,12 @@ export class UbBreadcrumbPageDirective {
 @Component({
   selector: "li[ubBreadcrumbSeparator]",
   standalone: true,
-  imports: [LucideAngularModule],
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ radixChevronRight })],
   template: `
     <span #ref><ng-content></ng-content></span>
-    @if(ref.children.length == 0) {
-    <lucide-angular
-      name="ChevronRight"
-      size="16"
-      class="flex h-3.5"
-    ></lucide-angular>
+    @if (ref.children.length == 0) {
+      <ng-icon name="radixChevronRight" size="16" class="flex h-3.5" />
     }
   `,
   host: {
@@ -110,9 +108,10 @@ export class UbBreadcrumbSeparatorComponent {
 @Component({
   selector: "span[ubBreadcrumbEllipsis]",
   standalone: true,
-  imports: [LucideAngularModule],
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ radixDotsHorizontal })],
   template: `
-    <lucide-angular name="MoreHorizontal" class="h-4 w-4"></lucide-angular>
+    <ng-icon name="radixDotsHorizontal" class="h-4 w-4" />
     <span class="sr-only">More</span>
   `,
   host: {

apps/www/src/registry/new-york/ui/breadcrumb.directive.ts

@@ -1,6 +1,7 @@
 import { Component, computed, Directive, input } from "@angular/core";
 
-import { LucideAngularModule } from "lucide-angular";
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { radixChevronRight, radixDotsHorizontal } from "@ng-icons/radix-icons";
 
 import { cn } from "@/lib/utils";
 
@@ -82,15 +83,12 @@ export class UbBreadcrumbPageDirective {
 @Component({
   selector: "li[ubBreadcrumbSeparator]",
   standalone: true,
-  imports: [LucideAngularModule],
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ radixChevronRight })],
   template: `
     <span #ref><ng-content></ng-content></span>
-    @if(ref.children.length == 0) {
-    <lucide-angular
-      name="ChevronRight"
-      size="16"
-      class="flex h-3.5"
-    ></lucide-angular>
+    @if (ref.children.length == 0) {
+      <ng-icon name="radixChevronRight" size="16" class="flex h-3.5" />
     }
   `,
   host: {
@@ -110,9 +108,10 @@ export class UbBreadcrumbSeparatorComponent {
 @Component({
   selector: "span[ubBreadcrumbEllipsis]",
   standalone: true,
-  imports: [LucideAngularModule],
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ radixDotsHorizontal })],
   template: `
-    <lucide-angular name="MoreHorizontal" class="h-4 w-4"></lucide-angular>
+    <ng-icon name="radixDotsHorizontal" class="h-4 w-4" />
     <span class="sr-only">More</span>
   `,
   host: {

apps/www/src/registry/ui.ts

@@ -15,7 +15,7 @@ export const ui: Registry = [
     name: "breadcrumb",
     type: "components:ui",
     files: ["ui/breadcrumb.directive.ts"],
-    dependencies: ["lucide-angular"],
+    dependencies: ["@ng-icons/core", "@ng-icons/radix-icons"],
   },
   {
     name: "button",