✨ feat(icons): added custom icon as a part of Zard icons

Author: mikij

apps/web/public/installation/manual/icon.md

@@ -163,6 +163,14 @@ import {
   Zap,
 } from 'lucide-angular';
 
+const DarkMode: LucideIconData = [
+  ['path', { d: 'M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' }],
+  ['path', { d: 'M12 3l0 18' }],
+  ['path', { d: 'M12 9l4.65 -4.65' }],
+  ['path', { d: 'M12 14.3l7.37 -7.37' }],
+  ['path', { d: 'M12 19.6l8.85 -8.85' }],
+];
+
 export const ZARD_ICONS = {
   house: House,
   settings: Settings,
@@ -248,6 +256,7 @@ export const ZARD_ICONS = {
   trash: Trash2,
   tag: Tag,
   'sun-moon': SunMoon,
+  'dark-mode': DarkMode,
 } as const satisfies Record<string, LucideIconData>;
 
 export declare type ZardIcon = keyof typeof ZARD_ICONS | LucideIconData;

apps/web/src/app/domain/components/header/header.component.html

@@ -42,25 +42,7 @@
         </button>
         <z-divider zOrientation="vertical" zSpacing="none" class="h-4!"></z-divider>
         <button z-button zType="ghost" zSize="sm" (click)="toggleTheme()">
-          <svg
-            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="size-4.5"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-            <path d="M12 3l0 18"></path>
-            <path d="M12 9l4.65 -4.65"></path>
-            <path d="M12 14.3l7.37 -7.37"></path>
-            <path d="M12 19.6l8.85 -8.85"></path>
-          </svg>
+          <z-icon zType="dark-mode" class="size-4.5" />
           <span class="sr-only">Toggle theme</span>
         </button>
       </aside>

apps/web/src/app/domain/components/header/header.component.ts

@@ -29,8 +29,9 @@ import { MobileMenuComponent } from '../mobile-nav/mobile-nav.component';
     ZardButtonComponent,
     ZardIconComponent,
     ZardBadgeComponent,
-    MobileMenuComponent,
     ZardDividerComponent,
+    ZardIconComponent,
+    MobileMenuComponent,
     AsyncPipe,
     DocResearcherComponent,
     LucideAngularModule,

libs/zard/src/lib/components/accordion/accordion.component.spec.ts

@@ -9,6 +9,9 @@ import { mergeClasses } from '../../shared/utils/utils';
 
 jest.mock('../../shared/utils/utils', () => ({
   mergeClasses: jest.fn().mockImplementation((variants, cls) => cls || 'default-classes'),
+  transform: jest.fn(),
+  generateId: jest.fn(),
+  noopFun: jest.fn(),
 }));
 
 const getHostComponent = (

libs/zard/src/lib/components/icon/icons.ts

@@ -86,6 +86,14 @@ import {
   Zap,
 } from 'lucide-angular';
 
+const DarkMode: LucideIconData = [
+  ['path', { d: 'M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' }],
+  ['path', { d: 'M12 3l0 18' }],
+  ['path', { d: 'M12 9l4.65 -4.65' }],
+  ['path', { d: 'M12 14.3l7.37 -7.37' }],
+  ['path', { d: 'M12 19.6l8.85 -8.85' }],
+];
+
 export const ZARD_ICONS = {
   house: House,
   settings: Settings,
@@ -171,6 +179,7 @@ export const ZARD_ICONS = {
   trash: Trash2,
   tag: Tag,
   'sun-moon': SunMoon,
+  'dark-mode': DarkMode,
 } as const satisfies Record<string, LucideIconData>;
 
 export declare type ZardIcon = keyof typeof ZARD_ICONS | LucideIconData;