"use client"; import { Pulse as PhosphorActivity, WarningCircle as PhosphorAlert, Archive as PhosphorArchive, ArrowDown as PhosphorArrowDown, ArrowLeft as PhosphorArrowLeft, ArrowRight as PhosphorArrowRight, ArrowUp as PhosphorArrowUp, Bell as PhosphorBell, BookmarkSimple as PhosphorBookmark, Calendar as PhosphorCalendar, CalendarDots as PhosphorCalendarDays, Camera as PhosphorCamera, ChartBar as PhosphorChartBar, ChartPie as PhosphorChartPie, Check as PhosphorCheck, CaretDown as PhosphorChevronDown, CaretLeft as PhosphorChevronLeft, CaretRight as PhosphorChevronRight, CaretUpDown as PhosphorChevronsUpDown, CaretUp as PhosphorChevronUp, ClipboardText as PhosphorClipboard, Clock as PhosphorClock, Cloud as PhosphorCloud, CreditCard as PhosphorCreditCard, Download as PhosphorDownload, PencilSimple as PhosphorEdit, Eye as PhosphorEye, EyeSlash as PhosphorEyeOff, File as PhosphorFile, Funnel as PhosphorFilter, Flag as PhosphorFlag, Folder as PhosphorFolder, Gift as PhosphorGift, Globe as PhosphorGlobe, SquaresFour as PhosphorGrid, Heart as PhosphorHeart, Question as PhosphorHelp, House as PhosphorHome, Image as PhosphorImage, Info as PhosphorInfo, Key as PhosphorKey, Lightning as PhosphorLightning, Link as PhosphorLink, List as PhosphorList, Lock as PhosphorLock, Envelope as PhosphorMail, MapTrifold as PhosphorMap, MapPin as PhosphorMapPin, Minus as PhosphorMinus, Moon as PhosphorMoon, Package as PhosphorPackage, Pause as PhosphorPause, Phone as PhosphorPhone, Play as PhosphorPlay, Plus as PhosphorPlus, ArrowClockwise as PhosphorRefresh, RocketLaunch as PhosphorRocket, FloppyDisk as PhosphorSave, MagnifyingGlass as PhosphorSearch, Gear as PhosphorSettings, Share as PhosphorShare, ShieldCheck as PhosphorShield, ShoppingBag as PhosphorShoppingBag, ShoppingCart as PhosphorShoppingCart, Star as PhosphorStar, Stop as PhosphorStop, Sun as PhosphorSun, Tag as PhosphorTag, ThumbsDown as PhosphorThumbsDown, ThumbsUp as PhosphorThumbsUp, Trash as PhosphorTrash, LockOpen as PhosphorUnlock, Upload as PhosphorUpload, User as PhosphorUser, UserMinus as PhosphorUserMinus, UserPlus as PhosphorUserPlus, Users as PhosphorUsers, VideoCamera as PhosphorVideo, Warning as PhosphorWarning, X as PhosphorX, } from "@phosphor-icons/react"; 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 phosphorIcon = ( IconComponent: React.ComponentType< { weight?: "regular" | "fill"; } & Record >, weight: "regular" | "fill", ): LibraryIconComponent => { const PhosphorWrappedIcon: LibraryIconComponent = (props) => ( ); PhosphorWrappedIcon.displayName = "PhosphorWrappedIcon"; return PhosphorWrappedIcon; }; // 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 = "phosphor"; const iconSets: Partial< Record> > = { phosphor: { activity: PhosphorActivity, x: PhosphorX, "arrow-left": PhosphorArrowLeft, "arrow-right": PhosphorArrowRight, "arrow-up": PhosphorArrowUp, "arrow-down": PhosphorArrowDown, bookmark: PhosphorBookmark, "calendar-days": PhosphorCalendarDays, camera: PhosphorCamera, "chart-bar": PhosphorChartBar, "chart-pie": PhosphorChartPie, "chevron-left": PhosphorChevronLeft, "chevron-right": PhosphorChevronRight, "chevron-up": PhosphorChevronUp, "chevron-down": PhosphorChevronDown, clipboard: PhosphorClipboard, cloud: PhosphorCloud, home: PhosphorHome, "credit-card": PhosphorCreditCard, search: PhosphorSearch, user: PhosphorUser, users: PhosphorUsers, "user-plus": PhosphorUserPlus, "user-minus": PhosphorUserMinus, settings: PhosphorSettings, bell: PhosphorBell, mail: PhosphorMail, calendar: PhosphorCalendar, clock: PhosphorClock, check: PhosphorCheck, plus: PhosphorPlus, minus: PhosphorMinus, menu: PhosphorList, map: PhosphorMap, info: PhosphorInfo, help: PhosphorHelp, alert: PhosphorAlert, warning: PhosphorWarning, star: PhosphorStar, heart: PhosphorHeart, lock: PhosphorLock, unlock: PhosphorUnlock, eye: PhosphorEye, "eye-off": PhosphorEyeOff, trash: PhosphorTrash, edit: PhosphorEdit, download: PhosphorDownload, upload: PhosphorUpload, share: PhosphorShare, link: PhosphorLink, filter: PhosphorFilter, folder: PhosphorFolder, file: PhosphorFile, flag: PhosphorFlag, gift: PhosphorGift, globe: PhosphorGlobe, grid: PhosphorGrid, image: PhosphorImage, archive: PhosphorArchive, key: PhosphorKey, lightning: PhosphorLightning, list: PhosphorList, moon: PhosphorMoon, "map-pin": PhosphorMapPin, package: PhosphorPackage, pause: PhosphorPause, phone: PhosphorPhone, play: PhosphorPlay, refresh: PhosphorRefresh, rocket: PhosphorRocket, save: PhosphorSave, shield: PhosphorShield, "shopping-cart": PhosphorShoppingCart, "shopping-bag": PhosphorShoppingBag, stop: PhosphorStop, sun: PhosphorSun, tag: PhosphorTag, "thumbs-down": PhosphorThumbsDown, "thumbs-up": PhosphorThumbsUp, video: PhosphorVideo, }, }; const iconSetsSolid: Partial< Record> > = { phosphor: { x: phosphorIcon(PhosphorX, "fill"), "arrow-left": phosphorIcon(PhosphorArrowLeft, "fill"), "arrow-right": phosphorIcon(PhosphorArrowRight, "fill"), "arrow-up": phosphorIcon(PhosphorArrowUp, "fill"), "arrow-down": phosphorIcon(PhosphorArrowDown, "fill"), "chevron-left": phosphorIcon(PhosphorChevronLeft, "fill"), "chevron-right": phosphorIcon(PhosphorChevronRight, "fill"), "chevron-up": phosphorIcon(PhosphorChevronUp, "fill"), "chevron-down": phosphorIcon(PhosphorChevronDown, "fill"), "chevrons-up-down": phosphorIcon(PhosphorChevronsUpDown, "fill"), home: phosphorIcon(PhosphorHome, "fill"), search: phosphorIcon(PhosphorSearch, "fill"), user: phosphorIcon(PhosphorUser, "fill"), settings: phosphorIcon(PhosphorSettings, "fill"), bell: phosphorIcon(PhosphorBell, "fill"), mail: phosphorIcon(PhosphorMail, "fill"), calendar: phosphorIcon(PhosphorCalendar, "fill"), clock: phosphorIcon(PhosphorClock, "fill"), check: phosphorIcon(PhosphorCheck, "fill"), plus: phosphorIcon(PhosphorPlus, "fill"), minus: phosphorIcon(PhosphorMinus, "fill"), menu: phosphorIcon(PhosphorList, "fill"), info: phosphorIcon(PhosphorInfo, "fill"), help: phosphorIcon(PhosphorHelp, "fill"), alert: phosphorIcon(PhosphorAlert, "fill"), star: phosphorIcon(PhosphorStar, "fill"), heart: phosphorIcon(PhosphorHeart, "fill"), lock: phosphorIcon(PhosphorLock, "fill"), unlock: phosphorIcon(PhosphorUnlock, "fill"), eye: phosphorIcon(PhosphorEye, "fill"), trash: phosphorIcon(PhosphorTrash, "fill"), edit: phosphorIcon(PhosphorEdit, "fill"), download: phosphorIcon(PhosphorDownload, "fill"), upload: phosphorIcon(PhosphorUpload, "fill"), share: phosphorIcon(PhosphorShare, "fill"), link: phosphorIcon(PhosphorLink, "fill"), filter: phosphorIcon(PhosphorFilter, "fill"), folder: phosphorIcon(PhosphorFolder, "fill"), file: phosphorIcon(PhosphorFile, "fill"), image: phosphorIcon(PhosphorImage, "fill"), archive: phosphorIcon(PhosphorArchive, "fill"), activity: phosphorIcon(PhosphorActivity, "fill"), bookmark: phosphorIcon(PhosphorBookmark, "fill"), "calendar-days": phosphorIcon(PhosphorCalendarDays, "fill"), camera: phosphorIcon(PhosphorCamera, "fill"), "chart-bar": phosphorIcon(PhosphorChartBar, "fill"), "chart-pie": phosphorIcon(PhosphorChartPie, "fill"), clipboard: phosphorIcon(PhosphorClipboard, "fill"), cloud: phosphorIcon(PhosphorCloud, "fill"), "credit-card": phosphorIcon(PhosphorCreditCard, "fill"), "eye-off": phosphorIcon(PhosphorEyeOff, "fill"), flag: phosphorIcon(PhosphorFlag, "fill"), gift: phosphorIcon(PhosphorGift, "fill"), globe: phosphorIcon(PhosphorGlobe, "fill"), grid: phosphorIcon(PhosphorGrid, "fill"), key: phosphorIcon(PhosphorKey, "fill"), lightning: phosphorIcon(PhosphorLightning, "fill"), list: phosphorIcon(PhosphorList, "fill"), map: phosphorIcon(PhosphorMap, "fill"), "map-pin": phosphorIcon(PhosphorMapPin, "fill"), moon: phosphorIcon(PhosphorMoon, "fill"), package: phosphorIcon(PhosphorPackage, "fill"), pause: phosphorIcon(PhosphorPause, "fill"), phone: phosphorIcon(PhosphorPhone, "fill"), play: phosphorIcon(PhosphorPlay, "fill"), refresh: phosphorIcon(PhosphorRefresh, "fill"), rocket: phosphorIcon(PhosphorRocket, "fill"), save: phosphorIcon(PhosphorSave, "fill"), shield: phosphorIcon(PhosphorShield, "fill"), "shopping-cart": phosphorIcon(PhosphorShoppingCart, "fill"), "shopping-bag": phosphorIcon(PhosphorShoppingBag, "fill"), stop: phosphorIcon(PhosphorStop, "fill"), sun: phosphorIcon(PhosphorSun, "fill"), tag: phosphorIcon(PhosphorTag, "fill"), "thumbs-down": phosphorIcon(PhosphorThumbsDown, "fill"), "thumbs-up": phosphorIcon(PhosphorThumbsUp, "fill"), users: phosphorIcon(PhosphorUsers, "fill"), "user-plus": phosphorIcon(PhosphorUserPlus, "fill"), "user-minus": phosphorIcon(PhosphorUserMinus, "fill"), video: phosphorIcon(PhosphorVideo, "fill"), warning: phosphorIcon(PhosphorWarning, "fill"), }, }; 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 };

Phosphor Library Icon

Showcase

Phosphor Library Icon