refactor(*): use 'Icon'-suffixed names for all phosphor imports

src/components/LibrariesBrowser.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/CaretDown'
-import { Check as CheckIcon } from '@phosphor-icons/react/Check'
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
+import { CheckIcon } from '@phosphor-icons/react/Check'
 import { type Framework } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import LibraryGridCard from '~/components/LibraryGridCard'

src/components/LibrariesOverlay.tsx

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
+import { XIcon } from '@phosphor-icons/react/X'
 import { LibrariesBrowser } from '~/components/LibrariesBrowser'
 
 export function LibrariesOverlay({

src/components/LibraryGridCard.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/CaretRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { CaretRightIcon } from '@phosphor-icons/react/CaretRight'
 import { twMerge } from 'tailwind-merge'
 import type { PublicLibrarySlim } from '~/libraries'
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'

src/components/LibraryLayout.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { CaretLeft as CaretLeftIcon } from '@phosphor-icons/react/CaretLeft'
-import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/CaretRight'
-import { List as ListIcon } from '@phosphor-icons/react/List'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { CaretLeftIcon } from '@phosphor-icons/react/CaretLeft'
+import { CaretRightIcon } from '@phosphor-icons/react/CaretRight'
+import { ListIcon } from '@phosphor-icons/react/List'
+import { XIcon } from '@phosphor-icons/react/X'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { Link, useMatches, useParams } from '@tanstack/react-router'

src/components/LoginModal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { XIcon } from '@phosphor-icons/react/X'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
 import { authClient } from '~/auth/client'

src/components/MegaMenuItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
 import { IconContext } from '@phosphor-icons/react/dist/lib/context'
 
 type IconComponent = React.ComponentType<{ className?: string }>

src/components/Navbar.tsx

@@ -16,26 +16,26 @@ const LazyMobileNavbarAuthControls = React.lazy(() =>
 import { NavbarCartButton } from './NavbarCartButton'
 import { MegaMenuItem } from './MegaMenuItem'
 import { Link, useLocation } from '@tanstack/react-router'
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
-import { Briefcase as BriefcaseIcon } from '@phosphor-icons/react/Briefcase'
-import { Code as CodeIcon } from '@phosphor-icons/react/Code'
-import { GridFour as GridFourIcon } from '@phosphor-icons/react/GridFour'
-import { Hammer as HammerIcon } from '@phosphor-icons/react/Hammer'
-import { Heart as HeartIcon } from '@phosphor-icons/react/Heart'
-import { Infinity as InfinityIcon } from '@phosphor-icons/react/Infinity'
-import { Lifebuoy as LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
-import { List as Menu } from '@phosphor-icons/react/List'
-import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
-import { Mailbox as MailboxIcon } from '@phosphor-icons/react/Mailbox'
-import { ShieldCheck as ShieldCheckIcon } from '@phosphor-icons/react/ShieldCheck'
-import { ShoppingBag as ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
-import { SignIn as SignInIcon } from '@phosphor-icons/react/SignIn'
-import { Sparkle as Sparkles } from '@phosphor-icons/react/Sparkle'
-import { TrendUp as TrendingUp } from '@phosphor-icons/react/TrendUp'
-import { Users as UsersIcon } from '@phosphor-icons/react/Users'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
+import { BriefcaseIcon } from '@phosphor-icons/react/Briefcase'
+import { CodeIcon } from '@phosphor-icons/react/Code'
+import { GridFourIcon } from '@phosphor-icons/react/GridFour'
+import { HammerIcon } from '@phosphor-icons/react/Hammer'
+import { HeartIcon } from '@phosphor-icons/react/Heart'
+import { InfinityIcon } from '@phosphor-icons/react/Infinity'
+import { LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
+import { ListIcon as Menu } from '@phosphor-icons/react/List'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
+import { MailboxIcon } from '@phosphor-icons/react/Mailbox'
+import { ShieldCheckIcon } from '@phosphor-icons/react/ShieldCheck'
+import { ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
+import { SignInIcon } from '@phosphor-icons/react/SignIn'
+import { SparkleIcon as Sparkles } from '@phosphor-icons/react/Sparkle'
+import { TrendUpIcon as TrendingUp } from '@phosphor-icons/react/TrendUp'
+import { UsersIcon } from '@phosphor-icons/react/Users'
+import { XIcon } from '@phosphor-icons/react/X'
 import { ThemeToggle } from './ThemeToggle'
 import { AiDockButton, SearchButton } from './SearchButton'
 import { BrandContextMenu } from './BrandContextMenu'

src/components/NavbarAuthControls.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { Gear } from '@phosphor-icons/react/Gear'
-import { Key } from '@phosphor-icons/react/Key'
-import { Lock } from '@phosphor-icons/react/Lock'
-import { SignIn, SignIn as SignInIcon } from '@phosphor-icons/react/SignIn'
-import { SignOut } from '@phosphor-icons/react/SignOut'
-import { Sparkle } from '@phosphor-icons/react/Sparkle'
+import { GearIcon } from '@phosphor-icons/react/Gear'
+import { KeyIcon } from '@phosphor-icons/react/Key'
+import { LockIcon } from '@phosphor-icons/react/Lock'
+import { SignInIcon } from '@phosphor-icons/react/SignIn'
+import { SignOutIcon } from '@phosphor-icons/react/SignOut'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -126,7 +126,7 @@ export function MobileNavbarAuthControls({
       onClick={onNavigate}
       className={itemClassName}
     >
-      <SignIn className="size-8 shrink-0" />
+      <SignInIcon className="size-8 shrink-0" />
       Sign In
     </Link>
   )
@@ -142,7 +142,7 @@ export function MobileNavbarAuthControls({
           onClick={onNavigate}
           className={itemClassName}
         >
-          <Gear className="size-8 shrink-0" />
+          <GearIcon className="size-8 shrink-0" />
           Account
         </Link>
         <Link
@@ -151,7 +151,7 @@ export function MobileNavbarAuthControls({
           onClick={onNavigate}
           className={itemClassName}
         >
-          <Sparkle className="size-8 shrink-0" />
+          <SparkleIcon className="size-8 shrink-0" />
           My Showcases
         </Link>
         {user && (
@@ -161,7 +161,7 @@ export function MobileNavbarAuthControls({
             onClick={onNavigate}
             className={itemClassName}
           >
-            <Key className="size-8 shrink-0" />
+            <KeyIcon className="size-8 shrink-0" />
             Integrations
           </Link>
         )}
@@ -172,7 +172,7 @@ export function MobileNavbarAuthControls({
             onClick={onNavigate}
             className={itemClassName}
           >
-            <Lock className="size-8 shrink-0" />
+            <LockIcon className="size-8 shrink-0" />
             Admin
           </Link>
         )}
@@ -182,7 +182,7 @@ export function MobileNavbarAuthControls({
           onClick={signOut}
           className={itemClassName}
         >
-          <SignOut className="size-8 shrink-0" />
+          <SignOutIcon className="size-8 shrink-0" />
           Sign Out
         </button>
       </Authenticated>

src/components/NavbarCartButton.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from '@tanstack/react-router'
-import { ShoppingCart as ShoppingCartIcon } from '@phosphor-icons/react/ShoppingCart'
+import { ShoppingCartIcon } from '@phosphor-icons/react/ShoppingCart'
 import { twMerge } from 'tailwind-merge'
 import { useCart } from '~/hooks/useCart'
 import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'

src/components/NotFound.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import { Link, useRouterState } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { BookOpen as BookOpenIcon } from '@phosphor-icons/react/BookOpen'
-import { Compass as CompassIcon } from '@phosphor-icons/react/Compass'
-import { House as HouseIcon } from '@phosphor-icons/react/House'
-import { Lifebuoy as LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
-import { Newspaper as NewspaperIcon } from '@phosphor-icons/react/Newspaper'
-import { Question as QuestionIcon } from '@phosphor-icons/react/Question'
-import { ShoppingBag as ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
-import { Sparkle as SparkleIcon } from '@phosphor-icons/react/Sparkle'
-import { Stack as StackIcon } from '@phosphor-icons/react/Stack'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { BookOpenIcon } from '@phosphor-icons/react/BookOpen'
+import { CompassIcon } from '@phosphor-icons/react/Compass'
+import { HouseIcon } from '@phosphor-icons/react/House'
+import { LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
+import { NewspaperIcon } from '@phosphor-icons/react/Newspaper'
+import { QuestionIcon } from '@phosphor-icons/react/Question'
+import { ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import { StackIcon } from '@phosphor-icons/react/Stack'
 import type { Icon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { libraries, type LibrarySlim } from '~/libraries'

src/components/OssSponsorsSection.tsx

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
 import { getOssSponsors } from '~/utils/sponsors.functions'
 import { Button } from '~/ui'
 import OssSponsors from './OssSponsors'

src/components/PartnersSponsorsSection.tsx

@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
 import { Button } from '~/components/ds/ui'
 import { OssSponsorsWithQuery } from '~/components/OssSponsorsSection'
 import { PartnersGrid, TierBand } from '~/components/PartnersGrid'

src/components/SearchButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Command as CommandIcon } from '@phosphor-icons/react/Command'
-import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
-import { Sparkle as SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import { CommandIcon } from '@phosphor-icons/react/Command'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
 import { twMerge } from 'tailwind-merge'
 import { Button, Tooltip } from '~/ui'
 import { useSearchContext } from '~/contexts/SearchContext'

src/components/Select.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
-import { CaretUpDown as CaretUpDownIcon } from '@phosphor-icons/react/CaretUpDown'
-import { Check as CheckIcon } from '@phosphor-icons/react/Check'
+import { CaretUpDownIcon } from '@phosphor-icons/react/CaretUpDown'
+import { CheckIcon } from '@phosphor-icons/react/Check'
 import { twMerge } from 'tailwind-merge'
 import {
   Dropdown,

src/components/Spinner.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { CircleNotch as CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
+import { CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
 
 interface SpinnerProps {
   className?: string

src/components/ThemeToggle.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useTheme } from './ThemeProvider'
-import { Moon as MoonIcon } from '@phosphor-icons/react/Moon'
-import { Sun as SunIcon } from '@phosphor-icons/react/Sun'
-import { SunHorizon as SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
+import { MoonIcon } from '@phosphor-icons/react/Moon'
+import { SunIcon } from '@phosphor-icons/react/Sun'
+import { SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
 import { Button } from '~/ui'
 
 export function ThemeToggle() {

src/components/VersionSelect.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { create } from 'zustand'
 import { useNavigate, useParams } from '@tanstack/react-router'
-import { Tag as TagIcon } from '@phosphor-icons/react/Tag'
+import { TagIcon } from '@phosphor-icons/react/Tag'
 import { Select, SelectOption } from './Select'
 import { getLibrary, LibraryId } from '~/libraries'
 import {

src/components/ds/ui/index.tsx

@@ -2,11 +2,11 @@ import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { Link } from '@tanstack/react-router'
-import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/CaretDown'
-import { CircleNotch as CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
-import { MagnifyingGlass } from '@phosphor-icons/react/MagnifyingGlass'
-import { User as UserIcon } from '@phosphor-icons/react/User'
-import { X } from '@phosphor-icons/react/X'
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
+import { CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
+import { UserIcon } from '@phosphor-icons/react/User'
+import { XIcon } from '@phosphor-icons/react/X'
 import type { MarkdownHeading } from '~/utils/markdown'
 import type { LibraryId } from '~/libraries/ids'
 import type { LibraryCategory } from '~/libraries/categories'
@@ -508,7 +508,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
               : 'h-10 gap-2.5 rounded-lg px-3',
           )}
         >
-          <MagnifyingGlass
+          <MagnifyingGlassIcon
             size={size === 'large' ? 21 : 18}
             weight="bold"
             aria-hidden="true"
@@ -530,7 +530,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
             onClick={reveal}
             className="grid size-10 shrink-0 place-items-center transition-colors duration-150 hover:text-text-primary focus-visible:text-text-accent focus-visible:outline-none motion-reduce:transition-none"
           >
-            <MagnifyingGlass size={18} weight="bold" aria-hidden="true" />
+            <MagnifyingGlassIcon size={18} weight="bold" aria-hidden="true" />
           </button>
           {React.cloneElement(input, {
             tabIndex: open ? props.tabIndex : -1,
@@ -555,7 +555,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
               skipMotion && 'transition-none',
             )}
           >
-            <X size={16} weight="bold" aria-hidden="true" />
+            <XIcon size={16} weight="bold" aria-hidden="true" />
           </button>
           <span
             aria-hidden="true"

src/components/landing/ChartsCatalogGallery.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { ArrowUpRight as ArrowUpRightIcon } from '@phosphor-icons/react/ArrowUpRight'
-import { Pause as PauseIcon } from '@phosphor-icons/react/Pause'
-import { Play as PlayIcon } from '@phosphor-icons/react/Play'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowUpRightIcon } from '@phosphor-icons/react/ArrowUpRight'
+import { PauseIcon } from '@phosphor-icons/react/Pause'
+import { PlayIcon } from '@phosphor-icons/react/Play'
 import { catalogCases } from '@tanstack/react-charts-catalog'
 import type { CatalogCaseId } from '@tanstack/react-charts-catalog'
 

src/components/landing/ChartsLandingGraphics.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Pause as PauseIcon } from '@phosphor-icons/react/Pause'
-import { Play as PlayIcon } from '@phosphor-icons/react/Play'
-import { Shuffle as ShuffleIcon } from '@phosphor-icons/react/Shuffle'
+import { PauseIcon } from '@phosphor-icons/react/Pause'
+import { PlayIcon } from '@phosphor-icons/react/Play'
+import { ShuffleIcon } from '@phosphor-icons/react/Shuffle'
 
 import { useIsDark } from '~/hooks/useIsDark'
 import { useInView } from '~/hooks/useInView'

src/components/landing/LandingCopyPromptButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
-import { Copy as CopyIcon } from '@phosphor-icons/react/Copy'
+import { CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
+import { CopyIcon } from '@phosphor-icons/react/Copy'
 import { twMerge } from 'tailwind-merge'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 

src/components/landing/LibraryLanding.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Link, useParams } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { ArrowsClockwise as ArrowsClockwiseIcon } from '@phosphor-icons/react/ArrowsClockwise'
-import { CalendarDots as CalendarDotsIcon } from '@phosphor-icons/react/CalendarDots'
-import { DownloadSimple as DownloadSimpleIcon } from '@phosphor-icons/react/DownloadSimple'
-import { Plus as PlusIcon } from '@phosphor-icons/react/Plus'
-import { Star as StarIcon } from '@phosphor-icons/react/Star'
-import { Swap as SwapIcon } from '@phosphor-icons/react/Swap'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowsClockwiseIcon } from '@phosphor-icons/react/ArrowsClockwise'
+import { CalendarDotsIcon } from '@phosphor-icons/react/CalendarDots'
+import { DownloadSimpleIcon } from '@phosphor-icons/react/DownloadSimple'
+import { PlusIcon } from '@phosphor-icons/react/Plus'
+import { StarIcon } from '@phosphor-icons/react/Star'
+import { SwapIcon } from '@phosphor-icons/react/Swap'
 import type { Icon } from '@phosphor-icons/react'
 
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'

src/components/markdown/CodeBlockView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Copy as CopyIcon } from '@phosphor-icons/react/Copy'
+import { CopyIcon } from '@phosphor-icons/react/Copy'
 import { twMerge } from 'tailwind-merge'
 import { useToast } from '~/components/ToastProvider'
 import { Button } from '~/ui'