"use client"; // SLICER SOURCE — NOT IMPORTED AT RUNTIME. // // This file is the input to `scripts/registry/slice-library-icon.ts`. // The slicer's TS-AST traversal expects this exact top-level shape // (statically imported icon libraries, `iconSets` / `iconSetsSolid` // object literals, `FALLBACK_SET` const, helper wrappers) so it can // extract a per-set slice for each downstream variant under // `library-icon-variants//library-icon.tsx`. // // Because every icon library is imported statically here, this file // would balloon the showcase bundle if it were on the runtime path. // It is NOT — the runtime entry is `library-icon.tsx`, which loads // lucide statically and dynamically imports the five non-default sets // from `library-icon-sets/.tsx`. Keep the structure here in sync // with the per-set modules; if a new icon name is added below, add it // to the matching per-set module too. import { faArchive, faArrowDown, faArrowLeft, faArrowRight, faArrowsRotate, faArrowsUpDown, faArrowUp, faBagShopping, faBars, faBell, faBolt, faBookmark, faBox, faCalendar, faCalendarDays, faCamera, faChartBar, faChartLine, faChartPie, faCheck, faChevronDown, faChevronLeft, faChevronRight, faChevronUp, faCircleExclamation, faCircleInfo, faCircleQuestion, faClipboard, faClock, faCloud, faCreditCard, faDownload, faEnvelope, faEye, faEyeSlash, faFile, faFilter, faFlag, faFolder, faGear, faGift, faGlobe, faGrip, faHeart, faHouse, faImage, faKey, faLink, faList, faLocationDot, faLock, faLockOpen, faMagnifyingGlass, faMap, faMinus, faMoon, faPause, faPenToSquare, faPhone, faPlay, faPlus, faRocket, faSave, faShare, faShield, faShoppingCart, faStar, faStop, faSun, faTag, faThumbsDown, faThumbsUp, faTrash, faTriangleExclamation, faUpload, faUser, faUserMinus, faUserPlus, faUsers, faVideo, faXmark, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon, type FontAwesomeIconProps, } from "@fortawesome/react-fontawesome"; 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; }>; const fontAwesome = ( icon: Parameters[0]["icon"], ): LibraryIconComponent => { const FontAwesomeWrappedIcon: LibraryIconComponent = ({ style, ...rest }) => ( )} style={style as FontAwesomeIconProps["style"]} /> ); FontAwesomeWrappedIcon.displayName = "FontAwesomeWrappedIcon"; return FontAwesomeWrappedIcon; }; // 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 = "fontawesome"; const iconSets: Partial< Record> > = { fontawesome: { activity: fontAwesome(faChartLine), x: fontAwesome(faXmark), "arrow-left": fontAwesome(faArrowLeft), "arrow-right": fontAwesome(faArrowRight), "arrow-up": fontAwesome(faArrowUp), "arrow-down": fontAwesome(faArrowDown), bookmark: fontAwesome(faBookmark), "calendar-days": fontAwesome(faCalendarDays), camera: fontAwesome(faCamera), "chart-bar": fontAwesome(faChartBar), "chart-pie": fontAwesome(faChartPie), "chevron-left": fontAwesome(faChevronLeft), "chevron-right": fontAwesome(faChevronRight), "chevron-up": fontAwesome(faChevronUp), "chevron-down": fontAwesome(faChevronDown), "chevrons-up-down": fontAwesome(faArrowsUpDown), clipboard: fontAwesome(faClipboard), cloud: fontAwesome(faCloud), home: fontAwesome(faHouse), "credit-card": fontAwesome(faCreditCard), search: fontAwesome(faMagnifyingGlass), user: fontAwesome(faUser), users: fontAwesome(faUsers), "user-plus": fontAwesome(faUserPlus), "user-minus": fontAwesome(faUserMinus), settings: fontAwesome(faGear), bell: fontAwesome(faBell), mail: fontAwesome(faEnvelope), calendar: fontAwesome(faCalendar), clock: fontAwesome(faClock), check: fontAwesome(faCheck), plus: fontAwesome(faPlus), minus: fontAwesome(faMinus), menu: fontAwesome(faBars), map: fontAwesome(faMap), info: fontAwesome(faCircleInfo), help: fontAwesome(faCircleQuestion), alert: fontAwesome(faCircleExclamation), warning: fontAwesome(faTriangleExclamation), star: fontAwesome(faStar), heart: fontAwesome(faHeart), lock: fontAwesome(faLock), unlock: fontAwesome(faLockOpen), eye: fontAwesome(faEye), "eye-off": fontAwesome(faEyeSlash), trash: fontAwesome(faTrash), edit: fontAwesome(faPenToSquare), download: fontAwesome(faDownload), upload: fontAwesome(faUpload), share: fontAwesome(faShare), link: fontAwesome(faLink), filter: fontAwesome(faFilter), folder: fontAwesome(faFolder), file: fontAwesome(faFile), flag: fontAwesome(faFlag), gift: fontAwesome(faGift), globe: fontAwesome(faGlobe), grid: fontAwesome(faGrip), image: fontAwesome(faImage), archive: fontAwesome(faArchive), key: fontAwesome(faKey), lightning: fontAwesome(faBolt), list: fontAwesome(faList), "map-pin": fontAwesome(faLocationDot), moon: fontAwesome(faMoon), package: fontAwesome(faBox), pause: fontAwesome(faPause), phone: fontAwesome(faPhone), play: fontAwesome(faPlay), refresh: fontAwesome(faArrowsRotate), rocket: fontAwesome(faRocket), save: fontAwesome(faSave), shield: fontAwesome(faShield), "shopping-cart": fontAwesome(faShoppingCart), "shopping-bag": fontAwesome(faBagShopping), stop: fontAwesome(faStop), sun: fontAwesome(faSun), tag: fontAwesome(faTag), "thumbs-down": fontAwesome(faThumbsDown), "thumbs-up": fontAwesome(faThumbsUp), video: fontAwesome(faVideo), }, }; 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 };

Fontawesome Library Icon

Showcase

Fontawesome Library Icon