"use client"; import { ShowChart as MuiActivity, Error as MuiAlert, Archive as MuiArchive, ArrowDownward as MuiArrowDown, ArrowBack as MuiArrowLeft, ArrowForward as MuiArrowRight, ArrowUpward as MuiArrowUp, Notifications as MuiBell, Bookmark as MuiBookmark, Event as MuiCalendar, CalendarMonth as MuiCalendarDays, PhotoCamera as MuiCamera, BarChart as MuiChartBar, PieChart as MuiChartPie, Check as MuiCheck, ExpandMore as MuiChevronDown, ChevronLeft as MuiChevronLeft, ChevronRight as MuiChevronRight, UnfoldMore as MuiChevronsUpDown, ExpandLess as MuiChevronUp, ContentPaste as MuiClipboard, AccessTime as MuiClock, Cloud as MuiCloud, CreditCard as MuiCreditCard, FileDownload as MuiDownload, Edit as MuiEdit, Visibility as MuiEye, VisibilityOff as MuiEyeOff, Description as MuiFile, FilterList as MuiFilter, Flag as MuiFlag, Folder as MuiFolder, CardGiftcard as MuiGift, Public as MuiGlobe, GridView as MuiGrid, Favorite as MuiHeart, Help as MuiHelp, Home as MuiHome, Image as MuiImage, Info as MuiInfo, Key as MuiKey, Bolt as MuiLightning, Link as MuiLink, List as MuiList, Lock as MuiLock, Email as MuiMail, Map as MuiMap, Place as MuiMapPin, Menu as MuiMenu, Remove as MuiMinus, DarkMode as MuiMoon, Inventory2 as MuiPackage, Pause as MuiPause, Phone as MuiPhone, PlayArrow as MuiPlay, Add as MuiPlus, Refresh as MuiRefresh, RocketLaunch as MuiRocket, Save as MuiSave, Search as MuiSearch, Settings as MuiSettings, Share as MuiShare, Shield as MuiShield, ShoppingBag as MuiShoppingBag, ShoppingCart as MuiShoppingCart, Star as MuiStar, Stop as MuiStop, LightMode as MuiSun, LocalOffer as MuiTag, ThumbDown as MuiThumbsDown, ThumbUp as MuiThumbsUp, Delete as MuiTrash, LockOpen as MuiUnlock, FileUpload as MuiUpload, Person as MuiUser, PersonRemove as MuiUserMinus, PersonAdd as MuiUserPlus, People as MuiUsers, Videocam as MuiVideo, WarningAmber as MuiWarning, Close as MuiX, } from "@mui/icons-material"; import * as React from "react"; type IconSetId = | "lucide" | "heroicons" | "tabler" | "phosphor" | "mui" | "fontawesome"; type IconStyle = "outline" | "solid"; type LibraryIconComponent = React.ComponentType<{ className?: string; style?: React.CSSProperties; title?: string; "aria-label"?: string; "aria-hidden"?: React.AriaAttributes["aria-hidden"]; "aria-busy"?: boolean; }>; // Constant the slicer rewrites per variant. Determines which set the // component falls back to when the active set has no entry for an icon. const FALLBACK_SET: IconSetId = "mui"; const iconSets: Partial< Record> > = { mui: { activity: MuiActivity, x: MuiX, "arrow-left": MuiArrowLeft, "arrow-right": MuiArrowRight, "arrow-up": MuiArrowUp, "arrow-down": MuiArrowDown, bookmark: MuiBookmark, "calendar-days": MuiCalendarDays, camera: MuiCamera, "chart-bar": MuiChartBar, "chart-pie": MuiChartPie, "chevron-left": MuiChevronLeft, "chevron-right": MuiChevronRight, "chevron-up": MuiChevronUp, "chevron-down": MuiChevronDown, "chevrons-up-down": MuiChevronsUpDown, clipboard: MuiClipboard, cloud: MuiCloud, home: MuiHome, "credit-card": MuiCreditCard, search: MuiSearch, user: MuiUser, users: MuiUsers, "user-plus": MuiUserPlus, "user-minus": MuiUserMinus, settings: MuiSettings, bell: MuiBell, mail: MuiMail, calendar: MuiCalendar, clock: MuiClock, check: MuiCheck, plus: MuiPlus, minus: MuiMinus, menu: MuiMenu, map: MuiMap, info: MuiInfo, help: MuiHelp, alert: MuiAlert, warning: MuiWarning, star: MuiStar, heart: MuiHeart, lock: MuiLock, unlock: MuiUnlock, eye: MuiEye, "eye-off": MuiEyeOff, trash: MuiTrash, edit: MuiEdit, download: MuiDownload, upload: MuiUpload, share: MuiShare, link: MuiLink, filter: MuiFilter, folder: MuiFolder, file: MuiFile, flag: MuiFlag, gift: MuiGift, globe: MuiGlobe, grid: MuiGrid, image: MuiImage, archive: MuiArchive, key: MuiKey, lightning: MuiLightning, list: MuiList, moon: MuiMoon, "map-pin": MuiMapPin, package: MuiPackage, pause: MuiPause, phone: MuiPhone, play: MuiPlay, refresh: MuiRefresh, rocket: MuiRocket, save: MuiSave, shield: MuiShield, "shopping-cart": MuiShoppingCart, "shopping-bag": MuiShoppingBag, stop: MuiStop, sun: MuiSun, tag: MuiTag, "thumbs-down": MuiThumbsDown, "thumbs-up": MuiThumbsUp, video: MuiVideo, }, }; const iconSetsSolid: Partial< Record> > = {}; const IconSetContext = React.createContext(FALLBACK_SET); const IconStyleContext = React.createContext("outline"); type IconSetProviderProps = { value: IconSetId; children: React.ReactNode; }; type IconStyleProviderProps = { value: IconStyle; children: React.ReactNode; }; type LibraryIconProps = { name: string; set?: IconSetId; variant?: IconStyle; size?: number; className?: string; title?: string; "aria-label"?: string; "aria-hidden"?: React.AriaAttributes["aria-hidden"]; "aria-busy"?: boolean; }; function IconSetProvider({ value, children }: IconSetProviderProps) { return ( {children} ); } function IconStyleProvider({ value, children }: IconStyleProviderProps) { return ( {children} ); } function LibraryIcon({ name, set, variant, size, className, title, "aria-label": ariaLabel, "aria-hidden": ariaHidden, "aria-busy": ariaBusy, }: LibraryIconProps) { const contextSet = React.useContext(IconSetContext); const contextVariant = React.useContext(IconStyleContext); const fallbackSet = iconSets[FALLBACK_SET]; const activeSet = set ?? contextSet; const activeVariant = variant ?? contextVariant; const baseIcons = iconSets[activeSet] ?? fallbackSet; const solidIcons = iconSetsSolid[activeSet]; const activeIcons = activeVariant === "solid" ? (solidIcons ?? baseIcons) : baseIcons; const IconComponent = activeIcons?.[name] ?? baseIcons?.[name] ?? fallbackSet?.[name]; if (!IconComponent) { if (process.env.NODE_ENV !== "production") { console.warn( `LibraryIcon: missing icon "${name}" in set "${activeSet}".`, ); } return null; } const label = ariaLabel ?? title; const style = size ? { width: size, height: size } : undefined; const resolvedAriaHidden = ariaHidden ?? (label ? undefined : true); return ( ); } export { IconSetProvider, IconStyleProvider, LibraryIcon };

Mui Library Icon

Showcase

Mui Library Icon