feat: implement universal icon system with Phosphor Icons

- Install @phosphor-icons/react package - Create centralized Icon component with size/weight/color variants - Create icon registry with 34 icons across 5 categories - Replace all raw Unicode symbols with proper icon components - Add icons to navigation, buttons, status indicators, git operations - Add icon CSS with consistent sizing and spacing - Fix type definitions for Phosphor icon compatibility Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)
2026-05-19 19:33:06 +02:00
parent cccc4a9d5a
commit 6f41fa7cbe
37 changed files with 1037 additions and 41 deletions
@@ -0,0 +1,150 @@
+import React from "react";
+import {
+  House,
+  Folder,
+  GitBranch,
+  Gear,
+  User,
+  SignOut,
+  Plus,
+  PencilSimple,
+  Trash,
+  FloppyDisk,
+  X,
+  ArrowsClockwise,
+  Copy,
+  MagnifyingGlass,
+  List,
+  Check,
+  Warning,
+  Info,
+  Spinner,
+  GitCommit,
+  GitMerge,
+  ClockCounterClockwise,
+  ArrowDown,
+  ArrowUp,
+  File,
+  FileText,
+  Image,
+  Binary,
+  Code,
+} from "@phosphor-icons/react";
+
+export type IconName =
+  | "dashboard"
+  | "projects"
+  | "repositories"
+  | "settings"
+  | "profile"
+  | "logout"
+  | "add"
+  | "edit"
+  | "delete"
+  | "save"
+  | "cancel"
+  | "refresh"
+  | "copy"
+  | "search"
+  | "menu"
+  | "close"
+  | "success"
+  | "error"
+  | "warning"
+  | "info"
+  | "loading"
+  | "branch"
+  | "commit"
+  | "merge"
+  | "history"
+  | "pull"
+  | "push"
+  | "fetch"
+  | "file"
+  | "folder"
+  | "code"
+  | "document"
+  | "image"
+  | "binary";
+
+const iconMap: Record<IconName, React.ComponentType<{ size?: number | string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }>> = {
+  dashboard: House,
+  projects: Folder,
+  repositories: GitBranch,
+  settings: Gear,
+  profile: User,
+  logout: SignOut,
+  add: Plus,
+  edit: PencilSimple,
+  delete: Trash,
+  save: FloppyDisk,
+  cancel: X,
+  refresh: ArrowsClockwise,
+  copy: Copy,
+  search: MagnifyingGlass,
+  menu: List,
+  close: X,
+  success: Check,
+  error: X,
+  warning: Warning,
+  info: Info,
+  loading: Spinner,
+  branch: GitBranch,
+  commit: GitCommit,
+  merge: GitMerge,
+  history: ClockCounterClockwise,
+  pull: ArrowDown,
+  push: ArrowUp,
+  fetch: ArrowsClockwise,
+  file: File,
+  folder: Folder,
+  code: Code,
+  document: FileText,
+  image: Image,
+  binary: Binary,
+};
+
+export interface IconProps {
+  name: IconName;
+  size?: "sm" | "md" | "lg" | "xl";
+  color?: string;
+  weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+  className?: string;
+  ariaLabel?: string;
+}
+
+const sizeMap: Record<NonNullable<IconProps["size"]>, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+};
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = "md",
+  color,
+  weight = "regular",
+  className,
+  ariaLabel,
+}) => {
+  const IconComponent = iconMap[name];
+  const sizeValue = sizeMap[size];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found`);
+    return null;
+  }
+
+  return (
+    <span
+      className={`icon icon-${size}${className ? ` ${className}` : ""}`}
+      style={{ color }}
+      aria-label={ariaLabel}
+      aria-hidden={!ariaLabel}
+      role="img"
+    >
+      <IconComponent size={sizeValue} weight={weight} />
+    </span>
+  );
+};