From c15a6ceff159aabf61eeef305a011d5faa1d0f36 Mon Sep 17 00:00:00 2001
From: unkn0wn <louis1.potevin1@gmail.com>
Date: Wed, 24 Jun 2026 06:46:29 +0200
Subject: [PATCH] refactor: replace icon imports with Lucide icons across
 components

---
 src/components/Avatar/avatar.astro            |  4 +-
 src/components/Modal/modal.astro              |  4 +-
 .../Notifications/notification.astro          |  4 +-
 src/components/Select/select.astro            |  6 +-
 .../numericStepper/numericStepper.astro       |  6 +-
 src/pages/index.astro                         | 56 ++++---------------
 6 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/src/components/Avatar/avatar.astro b/src/components/Avatar/avatar.astro
index 224cbcc..ea2d6cf 100644
--- a/src/components/Avatar/avatar.astro
+++ b/src/components/Avatar/avatar.astro
@@ -1,5 +1,5 @@
 ---
-import { ProfileIcon } from '../Icons';
+import { User } from '@lucide/astro';
 export interface Props {
   type:        'photo' | 'initials';
   name: string;
@@ -18,7 +18,7 @@ const { type, name, image } = Astro.props;
         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
       />
       <span class="avatar__fallback" style="display:none;">
-        <ProfileIcon size={24}/>
+        <User size={24}/>
       </span>
     </div>
   ) : (
diff --git a/src/components/Modal/modal.astro b/src/components/Modal/modal.astro
index 087a933..b65b4b6 100644
--- a/src/components/Modal/modal.astro
+++ b/src/components/Modal/modal.astro
@@ -1,5 +1,5 @@
 ---
-import { CloseIcon } from "../Icons";
+import { XIcon } from '@lucide/astro'
 
 export interface Props {
   id: string;
@@ -21,7 +21,7 @@ const hasFooter = Astro.slots.has("footer");
       <div class="modal__head">
         <span class="modal__title">{title}</span>
         <button class="modal__close" data-modal-close aria-label="Close">
-          <CloseIcon size={18} label="Close" />
+          <XIcon size={18} />
         </button>
       </div>
       <div class="modal__body"><slot /></div>
diff --git a/src/components/Notifications/notification.astro b/src/components/Notifications/notification.astro
index cee7550..903430d 100644
--- a/src/components/Notifications/notification.astro
+++ b/src/components/Notifications/notification.astro
@@ -1,5 +1,5 @@
 ---
-import { CloseIcon } from "../Icons";
+import { XIcon } from '@lucide/astro'
 
 export interface Props {
   type: "info" | "success" | "warning" | "error";
@@ -21,7 +21,7 @@ const { type } = Astro.props;
     aria-label="Close notification"
     onclick={`document.getElementById('${notificationUUID}')?.remove()`}
   >
-    <CloseIcon size={16} label="Close notification" />
+    <XIcon size={16} />
   </button>
 </div>
 
diff --git a/src/components/Select/select.astro b/src/components/Select/select.astro
index 6f6934d..e7b08fc 100644
--- a/src/components/Select/select.astro
+++ b/src/components/Select/select.astro
@@ -1,5 +1,5 @@
 ---
-import Arrow2 from '../Icons/Arrow2/Arrow2.astro';
+import { ChevronLeft, ChevronDown } from '@lucide/astro'
 
 export interface Props {
   default?: string;
@@ -23,10 +23,10 @@ const { default: defaultValue, disabled = false, value } = Astro.props;
     disabled={disabled}
   >
     <span class="select__label"></span><span class="select__arrow select__arrow--closed">
-      <Arrow2 size={16} orientation="left" />
+      <ChevronLeft size={16} />
     </span>
     <span class="select__arrow select__arrow--open select__arrow--hidden">
-      <Arrow2 size={16} orientation="down" />
+      <ChevronDown size={16} />
     </span>
   </button>
 
diff --git a/src/components/numericStepper/numericStepper.astro b/src/components/numericStepper/numericStepper.astro
index aba2927..ca68780 100644
--- a/src/components/numericStepper/numericStepper.astro
+++ b/src/components/numericStepper/numericStepper.astro
@@ -1,6 +1,6 @@
 ---
 import Button from '../Button/button.astro';
-import { MinusIcon, PlusIcon } from '../Icons';
+import { Minus, Plus } from '@lucide/astro'
 
 export interface Props {
   id: string;
@@ -24,7 +24,7 @@ const { id, min, max, value = 0, step = 1 } = Astro.props;
 >
   <span class="numeric-stepper__control" data-action="increment">
     <Button type="ghost" icon={true}>
-      <MinusIcon size={24} />
+      <Minus size={24} />
     </Button>
   </span>
   
@@ -32,7 +32,7 @@ const { id, min, max, value = 0, step = 1 } = Astro.props;
   
   <span class="numeric-stepper__control" data-action="decrement">
     <Button type="ghost" icon={true}>
-      <PlusIcon size={24} />
+      <Plus size={24} />
     </Button>
   </span>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a03f0ad..8d478fc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,6 +31,8 @@ import LoadingBar from "../components/LoadingBar/loadingBar.astro";
 import Tooltip from "../components/Tooltip/tooltip.astro";
 import Modal from "../components/Modal/modal.astro";
 
+import { Plus, Shield, ListFilter, Download, Ellipsis, LayoutGrid, ChartLine, Settings } from "@lucide/astro";
+
 import {
   Arrow2Icon,
   BinIcon,
@@ -327,16 +329,16 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
             <span class="vg__lbl">With icon · icon-only</span>
             <div class="vg__body">
               <Button type="primary" size="md"
-                ><PlusIcon slot="icon-left" size={16} />New service</Button
+                ><Plus slot="icon-left" size={16} />New service</Button
               >
               <Button type="secondary" size="md"
-                >Filter<FilterIcon slot="icon-right" size={16} /></Button
+                >Filter<ListFilter slot="icon-right" size={16} /></Button
               >
               <Button type="ghost" size="md" icon={true}
-                ><MoreIcon size={18} /></Button
+                ><Ellipsis size={18} /></Button
               >
               <Button type="primary" size="md" icon={true}
-                ><DownloadIcon size={18} /></Button
+                ><Download size={18} /></Button
               >
             </div>
           </div>
@@ -505,6 +507,8 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
               />
               <Avatar type="initials" name="Ava Stone" />
               <Avatar type="initials" name="Jane Smith" />
+              <Avatar type="photo" name="Bob Johnson"
+                image="https://i.pravatarc/80?img=12"/>
             </div>
           </div>
         </section>
@@ -730,16 +734,16 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
             <div class="vg__body">
               <Sidebar header="Nova">
                 <SidebarItem href="#" active
-                  ><OverviewIcon slot="icon" size={18} />Overview</SidebarItem
+                  ><LayoutGrid slot="icon" size={18} />Overview</SidebarItem
                 >
                 <SidebarItem href="#"
-                  ><StatsIcon slot="icon" size={18} />Metrics</SidebarItem
+                  ><ChartLine slot="icon" size={18} />Metrics</SidebarItem
                 >
                 <SidebarItem href="#"
-                  ><ShieldIcon slot="icon" size={18} />Security</SidebarItem
+                  ><Shield slot="icon" size={18} />Security</SidebarItem
                 >
                 <SidebarItem href="#"
-                  ><SettingsIcon slot="icon" size={18} />Settings</SidebarItem
+                  ><Settings slot="icon" size={18} />Settings</SidebarItem
                 >
               </Sidebar>
             </div>
@@ -774,23 +778,6 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
         <!-- ── ICONS ── -->
         <section id="icons" class="blk">
           <h2>Icons</h2>
-          <p class="blk__desc">25 line icons at 16 / 24 / 32 px.</p>
-
-          <div class="vg">
-            <span class="vg__lbl">Arrow2 — orientations × 16 / 24 / 32</span>
-            <div class="vg__body">
-              {
-                ([16, 24, 32] as const).map((s) => (
-                  <span class="icon-line">
-                    <Arrow2Icon size={s} orientation="up" />
-                    <Arrow2Icon size={s} orientation="right" />
-                    <Arrow2Icon size={s} orientation="down" />
-                    <Arrow2Icon size={s} orientation="left" />
-                  </span>
-                ))
-              }
-            </div>
-          </div>
 
           <div class="vg">
             <span class="vg__lbl">Library — 25 icons at 24px</span>
@@ -807,25 +794,6 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
               </div>
             </div>
           </div>
-
-          <div class="vg">
-            <span class="vg__lbl">Sizes — 16 / 24 / 32</span>
-            <div class="vg__body">
-              {
-                [SearchIcon, SettingsIcon, ShareIcon, DownloadIcon].map(
-                  (Icon) => (
-                    <span class="icon-line">
-                      <>
-                        <Icon size={16} />
-                        <Icon size={24} />
-                        <Icon size={32} />
-                      </>
-                    </span>
-                  ),
-                )
-              }
-            </div>
-          </div>
         </section>
       </main>
     </div>