Merge pull request #2708 from kev1n77/fmy/ui-sys

fix(ui): unify icon assets and usage across the design system and Web UI

Author: kev1n77

design-system/README.md

@@ -61,6 +61,11 @@ pnpm run design-system:check
 
 The Design Lab development entry uses source aliases for component HMR. Its production build consumes the public package exports, so authoring convenience cannot silently become the published contract.
 
+Design Lab and Web UI also register `tooling/vite/watch-source.mjs` to watch
+the aliased UI source directory outside their application roots. Source aliases
+alone do not watch imported SVG assets: without this registration an icon edit
+can leave the previous inline asset module cached until the dev server restarts.
+
 ## Dependency direction
 
 ```text

design-system/apps/design-lab/src/App.tsx

@@ -6,34 +6,13 @@ import {
 } from "react";
 import type { SystemTokenMode } from "@bitfun/design-tokens";
 import type { ThemeDataName } from "@bitfun/theme-bitfun";
-import {
-  AppWindow,
-  Blocks,
-  BookOpen,
-  Braces,
-  CircleDashed,
-  FileText,
-  House,
-  Languages,
-  Menu,
-  Moon,
-  MousePointerClick,
-  Palette,
-  PanelTop,
-  PanelsTopLeft,
-  Search,
-  Settings2,
-  SquareTerminal,
-  Sun,
-  ToggleLeft,
-  X,
-  type LucideIcon,
-} from "lucide-react";
-import {
+import { AppWindow, Blocks, BookOpen, Braces, CircleDashed, FileText, House, Languages, Menu, Moon, MousePointerClick, PanelTop, PanelsTopLeft, SquareTerminal, Sun, ToggleLeft, type LucideIcon } from "lucide-react";
+import { Icon as CatalogIcon,
   ThemeRoot,
   type ColorScheme,
   type ContrastMode,
   type DensityMode,
+  type IconName,
 } from "@bitfun/ui";
 import { componentRegistry } from "@bitfun/ui/registry";
 import {
@@ -83,7 +62,7 @@ type LabRoute =
 
 interface SearchDestination {
   detail: string;
-  icon: LucideIcon;
+  icon: LucideIcon | IconName;
   keywords: string;
   label: string;
   route: LabRoute;
@@ -209,7 +188,7 @@ export function App() {
     },
     {
       detail: t("search.colorsDetail", { count: colorTokenCatalog.length }),
-      icon: Palette,
+      icon: "palette",
       keywords: `colors semantic palette scale reference theme ${t("nav.colors")}`,
       label: t("nav.colors"),
       route: { page: "colors" },
@@ -404,7 +383,7 @@ export function App() {
             <strong>BitFun Design</strong>
           </span>
           <button aria-label={t("app.closeNavigation")} onClick={() => setSidebarOpen(false)} type="button">
-            <X aria-hidden="true" size={18} />
+            <CatalogIcon name="xmark" size="lg" aria-hidden="true" style={{ width: 18, height: 18 }} />
           </button>
         </div>
 
@@ -453,7 +432,7 @@ export function App() {
               navigate({ page: "colors" });
             }}
           >
-            <Palette aria-hidden="true" size={17} />
+            <CatalogIcon name="palette" size="md" style={{ width: 17, height: 17 }} aria-hidden="true" />
             <span>{t("nav.colors")}</span>
             <small>{colorTokenCatalog.length}</small>
           </a>
@@ -547,7 +526,7 @@ export function App() {
             type="button"
           >
             {t(`settings.${density}` as MessageKey)}
-            <Settings2 aria-hidden="true" size={13} />
+            <CatalogIcon name="settings" size="sm" style={{ width: 13, height: 13 }} aria-hidden="true" />
           </button>
         </div>
       </aside>
@@ -564,7 +543,7 @@ export function App() {
           </button>
 
           <div className="lab-search">
-            <Search aria-hidden="true" size={17} />
+            <CatalogIcon name="search" size="lg" aria-hidden="true" style={{ width: 17, height: 17 }} />
             <input
               aria-autocomplete="list"
               aria-controls="lab-search-results"
@@ -594,7 +573,7 @@ export function App() {
                       role="option"
                       type="button"
                     >
-                      <span><Icon aria-hidden="true" size={16} /></span>
+                      <span>{typeof Icon === "string" ? <CatalogIcon name={Icon} size="md" /> : <Icon aria-hidden="true" size={16} />}</span>
                       <span>
                         <strong>{destination.label}</strong>
                         <small>{destination.detail}</small>
@@ -655,7 +634,7 @@ export function App() {
               onClick={() => setSettingsOpen((current) => !current)}
               type="button"
             >
-              <Settings2 aria-hidden="true" size={18} />
+              <CatalogIcon name="settings" size="lg" style={{ width: 18, height: 18 }} aria-hidden="true" />
             </button>
             {settingsOpen && (
               <div className="lab-settings-panel" id="lab-settings-panel">
@@ -665,7 +644,7 @@ export function App() {
                     <span>{t("settings.subtitle")}</span>
                   </div>
                   <button aria-label={t("settings.close")} onClick={() => setSettingsOpen(false)} type="button">
-                    <X aria-hidden="true" size={16} />
+                    <CatalogIcon name="xmark" size="md" aria-hidden="true" />
                   </button>
                 </div>
                 <label>

design-system/apps/design-lab/src/pages/ColorsPage.tsx

@@ -1,14 +1,6 @@
 import { Fragment, useMemo, useState, type CSSProperties } from "react";
-import {
-  ChevronDown,
-  ChevronRight,
-  Contrast,
-  LayoutGrid,
-  Moon,
-  Search,
-  Sun,
-} from "lucide-react";
-import type { DensityMode } from "@bitfun/ui";
+import { Contrast, LayoutGrid, Moon, Sun } from "lucide-react";
+import { Icon, type DensityMode } from "@bitfun/ui";
 import {
   themeContractVersion,
   themeTokenCatalog,
@@ -226,7 +218,7 @@ export function ColorsPage({
     <main className="lab-page lab-page--colors" id="colors">
       <nav aria-label={t("colors.breadcrumbLabel")} className="colors-breadcrumb">
         <span>{t("nav.foundations")}</span>
-        <ChevronRight aria-hidden="true" size={14} />
+        <Icon name="chevron-right" size="sm" aria-hidden="true" />
         <strong>Colors</strong>
       </nav>
 
@@ -249,7 +241,7 @@ export function ColorsPage({
                   {t("colors.themeName", { version: themeContractVersion })}
                 </option>
               </select>
-              <ChevronDown aria-hidden="true" size={15} />
+              <Icon name="chevron-down" size="lg" aria-hidden="true" style={{ width: 15, height: 15 }} />
             </span>
           </label>
 
@@ -266,7 +258,7 @@ export function ColorsPage({
                   <option key={value} value={value}>{t(label)}</option>
                 ))}
               </select>
-              <ChevronDown aria-hidden="true" size={15} />
+              <Icon name="chevron-down" size="lg" aria-hidden="true" style={{ width: 15, height: 15 }} />
             </span>
           </label>
 
@@ -283,7 +275,7 @@ export function ColorsPage({
                 <option value="comfortable">{t("settings.comfortable")}</option>
                 <option value="touch">{t("settings.touch")}</option>
               </select>
-              <ChevronDown aria-hidden="true" size={15} />
+              <Icon name="chevron-down" size="lg" aria-hidden="true" style={{ width: 15, height: 15 }} />
             </span>
           </label>
         </div>
@@ -309,7 +301,7 @@ export function ColorsPage({
           <h2>{t("colors.semantic.title")}</h2>
           <div className="colors-semantic-tools">
             <label className="colors-search-field">
-              <Search aria-hidden="true" size={16} />
+              <Icon name="search" size="md" aria-hidden="true" />
               <input
                 aria-label={t("colors.semantic.searchLabel")}
                 onChange={(event) => setQuery(event.target.value)}
@@ -329,7 +321,7 @@ export function ColorsPage({
                   <option key={group} value={group}>{t(groupLabelKeys[group])}</option>
                 ))}
               </select>
-              <ChevronDown aria-hidden="true" size={15} />
+              <Icon name="chevron-down" size="lg" aria-hidden="true" style={{ width: 15, height: 15 }} />
             </label>
           </div>
         </header>
@@ -403,7 +395,7 @@ export function ColorsPage({
             type="button"
           >
             {expanded ? t("colors.collapse") : t("colors.expand")}
-            <ChevronDown aria-hidden="true" data-expanded={expanded || undefined} size={15} />
+            <Icon name="chevron-down" size="lg" aria-hidden="true" data-expanded={expanded || undefined} style={{ width: 15, height: 15 }} />
           </button>
         )}
       </section>
@@ -425,7 +417,7 @@ export function ColorsPage({
                   </option>
                 ))}
               </select>
-              <ChevronDown aria-hidden="true" size={15} />
+              <Icon name="chevron-down" size="lg" aria-hidden="true" style={{ width: 15, height: 15 }} />
             </span>
           </label>
         </header>