Introduce Lucide based Icon component and updates

package.json

@@ -51,7 +51,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@mui/icons-material": "^7.0.0",
-    "react-icons": "^5.3.0",
+    "lucide-react": "^1.17.0",
     "utif": "^3.1.0"
   },
   "peerDependencies": {

src/components/DataDisplay/Icons/LucideIcon.tsx

@@ -0,0 +1,65 @@
+import { SvgIcon, type SvgIconProps } from "@mui/material";
+import type { LucideIcon as LucideIconType } from "lucide-react";
+import { iconSizes, type IconSize } from "./iconSizes";
+
+const muiFontSizeMap = {
+  small: "xs",
+  medium: "sm",
+  large: "md",
+} as const;
+
+export interface LucideIconProps extends Omit<SvgIconProps, "component"> {
+  icon: LucideIconType;
+
+  /**
+   * DiamondDS icon size.
+   * Prefer this over `fontSize`.
+   */
+  size?: IconSize;
+
+  /**
+   * MUI compatibility alias.
+   * Prefer `size` for DiamondDS icons.
+   */
+  fontSize?: SvgIconProps["fontSize"];
+}
+
+export function LucideIcon({
+  icon,
+  size,
+  fontSize = "medium",
+  sx,
+  ...props
+}: LucideIconProps) {
+  const resolvedSize =
+    size ??
+    (fontSize === "small" || fontSize === "medium" || fontSize === "large"
+      ? muiFontSizeMap[fontSize]
+      : "md");
+
+  const config = iconSizes[resolvedSize];
+
+  return (
+    <SvgIcon
+      component={icon}
+      inheritViewBox
+      fontSize={fontSize}
+      sx={{
+        width: config.size,
+        height: config.size,
+        fill: "none",
+        stroke: "currentColor",
+
+        "& *": {
+          stroke: "currentColor",
+          strokeWidth: config.strokeWidth,
+        },
+
+        ...sx,
+      }}
+      {...props}
+    />
+  );
+}
+
+export default LucideIcon;

src/components/DataDisplay/Icons/iconSizes.ts

@@ -0,0 +1,9 @@
+export const iconSizes = {
+  xs: { size: 16, strokeWidth: 1.5 },
+  sm: { size: 20, strokeWidth: 1.75 },
+  md: { size: 24, strokeWidth: 2 },
+  lg: { size: 32, strokeWidth: 2.25 },
+  xl: { size: 40, strokeWidth: 2.25 },
+} as const;
+
+export type IconSize = keyof typeof iconSizes;

src/components/DataDisplay/Icons/icons.tsx

@@ -0,0 +1,215 @@
+import {
+  ArrowLeft,
+  ArrowRight,
+  AlertTriangle,
+  Bell,
+  Briefcase,
+  Check,
+  CheckCircle2,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleX,
+  ClipboardList,
+  Copy,
+  Flame,
+  Folder,
+  Grid3x3,
+  Heart,
+  History,
+  House,
+  Inbox,
+  Info,
+  LogIn,
+  LogOut,
+  Mail,
+  MapPin,
+  Menu,
+  Plus,
+  Printer,
+  RefreshCw,
+  Save,
+  Search,
+  Send,
+  Settings,
+  Share2,
+  Star,
+  Trash2,
+  X,
+  Sun,
+  Moon,
+  UserRound,
+  CheckCircle,
+} from "lucide-react";
+
+import { LucideIcon, type LucideIconProps } from "./LucideIcon";
+
+type IconAliasProps = Omit<LucideIconProps, "icon">;
+
+export const ArrowLeftIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ArrowLeft} {...props} />
+);
+
+export const ArrowRightIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ArrowRight} {...props} />
+);
+
+export const AddIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Plus} {...props} />
+);
+
+export const AssignmentIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ClipboardList} {...props} />
+);
+
+export const DeleteIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Trash2} {...props} />
+);
+
+export const ExpandMoreIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronDown} {...props} />
+);
+
+export const FavoriteIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Heart} {...props} />
+);
+
+export const FileCopyIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Copy} {...props} />
+);
+
+export const FolderIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Folder} {...props} />
+);
+
+export const GrainIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Grid3x3} {...props} />
+);
+
+export const HomeIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={House} {...props} />
+);
+
+export const InboxIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Inbox} {...props} />
+);
+
+export const LocationOnIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={MapPin} {...props} />
+);
+
+export const MailIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Mail} {...props} />
+);
+
+export const MenuIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Menu} {...props} />
+);
+
+export const NotificationsIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Bell} {...props} />
+);
+
+export const PageviewIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Search} {...props} />
+);
+
+export const PrintIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Printer} {...props} />
+);
+
+export const RestoreIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={History} {...props} />
+);
+
+export const SaveIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Save} {...props} />
+);
+
+export const SendIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Send} {...props} />
+);
+
+export const ShareIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Share2} {...props} />
+);
+
+export const WhatshotIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Flame} {...props} />
+);
+
+export const WorkIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Briefcase} {...props} />
+);
+
+export const SearchIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Search} {...props} />
+);
+
+export const SettingsIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Settings} {...props} />
+);
+
+export const CheckIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Check} {...props} />
+);
+
+export const CloseIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={X} {...props} />
+);
+
+export const ChevronDownIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronDown} {...props} />
+);
+
+export const ChevronRightIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronRight} {...props} />
+);
+
+export const ChevronUpIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronUp} {...props} />
+);
+
+export const ChevronLeftIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronLeft} {...props} />
+);
+
+export const SuccessIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={CheckCircle} {...props} />
+);
+export const ErrorIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={CircleX} {...props} />
+);
+export const WarningIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={AlertTriangle} {...props} />
+);
+export const InfoIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Info} {...props} />
+);
+
+export const StarIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Star} {...props} />
+);
+export const LoginIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={LogIn} {...props} />
+);
+export const LogoutIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={LogOut} {...props} />
+);
+
+export const SunIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Sun} {...props} />
+);
+
+export const MoonIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Moon} {...props} />
+);
+
+export const RefreshIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={RefreshCw} {...props} />
+);
+
+export const UserIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={UserRound} {...props} />
+);

src/components/DataDisplay/Icons/index.ts

@@ -0,0 +1,9 @@
+export * from "./icons";
+
+export { SuccessIcon, ErrorIcon, InfoIcon, WarningIcon } from "./icons";
+
+export { iconSizes } from "./iconSizes";
+export type { IconSize } from "./iconSizes";
+
+export { LucideIcon } from "./LucideIcon";
+export type { LucideIconProps } from "./LucideIcon";