refactor(*): migrate deprecated phosphor icon names to 'Icon' suffix

scripts/generate-phosphor-icon-registry.mjs

@@ -9,17 +9,14 @@ const iconNames = readdirSync(path.join(packageRoot, 'dist/csr'))
   .filter((fileName) => fileName.endsWith('.es.js'))
   .map((fileName) => fileName.slice(0, -'.es.js'.length))
   .sort((a, b) => a.localeCompare(b))
-const getLocalName = (iconName) =>
-  iconName === 'Infinity' ? 'InfinityIcon' : iconName
-const getImportSpecifier = (iconName) => {
-  const localName = getLocalName(iconName)
-  return localName === iconName ? iconName : `${iconName} as ${localName}`
-}
+// Every icon module exports both `Name` (deprecated) and `NameIcon`. The
+// suffixed export is the supported one and never collides with a JS global.
+const getLocalName = (iconName) => `${iconName}Icon`
 
 const imports = iconNames
   .map(
     (iconName) =>
-      `import { ${getImportSpecifier(iconName)} } from '@phosphor-icons/react/${iconName}'`,
+      `import { ${getLocalName(iconName)} } from '@phosphor-icons/react/${iconName}'`,
   )
   .join('\n')
 const entries = iconNames

src/builder/templates.ts

@@ -7,16 +7,16 @@
 
 import type { Icon } from '@phosphor-icons/react'
 import {
-  Rocket,
-  Robot,
-  SquaresFour,
-  FileText,
-  HardDrives,
-  Radio,
-  Globe,
-  HardDrive,
-  Plus,
-  ShoppingBag,
+  RocketIcon,
+  RobotIcon,
+  SquaresFourIcon,
+  FileTextIcon,
+  HardDrivesIcon,
+  RadioIcon,
+  GlobeIcon,
+  HardDriveIcon,
+  PlusIcon,
+  ShoppingBagIcon,
 } from '@phosphor-icons/react'
 
 export interface Template {
@@ -39,79 +39,79 @@ export const TEMPLATES: Array<Template> = [
     id: 'blank',
     name: 'Blank',
     description: 'Start from scratch',
-    icon: Plus,
+    icon: PlusIcon,
     color: '#6B7280', // gray
     features: ['cloudflare'],
   },
   {
     id: 'saas',
     name: 'SaaS Starter',
     description: 'Auth, database, and UI',
-    icon: Rocket,
+    icon: RocketIcon,
     color: '#F97316', // orange
     features: ['cloudflare', 'better-auth', 'prisma', 'shadcn', 'form'],
   },
   {
     id: 'ai-chat',
     name: 'AI Chat',
     description: 'LLM-powered app',
-    icon: Robot,
+    icon: RobotIcon,
     color: '#8B5CF6', // violet
     features: ['cloudflare', 'ai', 'store', 'shadcn'],
   },
   {
     id: 'dashboard',
     name: 'Dashboard',
     description: 'Admin panels, data tables',
-    icon: SquaresFour,
+    icon: SquaresFourIcon,
     color: '#3B82F6', // blue
     features: ['cloudflare', 'table', 'tanstack-query', 'shadcn', 'form'],
   },
   {
     id: 'blog',
     name: 'Blog / CMS',
     description: 'Content-driven site',
-    icon: FileText,
+    icon: FileTextIcon,
     color: '#EC4899', // pink
     features: ['cloudflare', 'tanstack-query'],
   },
   {
     id: 'api-first',
     name: 'API-First',
     description: 'Type-safe backend APIs',
-    icon: HardDrives,
+    icon: HardDrivesIcon,
     color: '#10B981', // emerald
     features: ['cloudflare', 'tRPC', 'tanstack-query', 'drizzle'],
   },
   {
     id: 'realtime',
     name: 'Realtime',
     description: 'Live, collaborative features',
-    icon: Radio,
+    icon: RadioIcon,
     color: '#EF4444', // red
     features: ['cloudflare', 'db', 'tanstack-query'],
   },
   {
     id: 'i18n',
     name: 'Multi-Language',
     description: 'Internationalized app',
-    icon: Globe,
+    icon: GlobeIcon,
     color: '#06B6D4', // cyan
     features: ['cloudflare', 'paraglide', 'shadcn'],
   },
   {
     id: 'local-first',
     name: 'Local-First',
     description: 'Offline-capable, sync-enabled',
-    icon: HardDrive,
+    icon: HardDriveIcon,
     color: '#F59E0B', // amber
     features: ['cloudflare', 'db', 'tanstack-query', 'store'],
   },
   {
     id: 'storefront',
     name: 'Storefront',
     description: 'Sell products with Shopify',
-    icon: ShoppingBag,
+    icon: ShoppingBagIcon,
     color: '#5A31F4', // Shopify purple
     features: ['cloudflare'],
     exampleId: 'shopify-storefront',

src/components/ApplicationStarter.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
 import { ClientOnly } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  Check,
-  CaretDown,
-  Copy,
-  DownloadSimple,
-  GithubLogo,
-  OpenAiLogo,
-  CircleNotch,
-  ArrowCounterClockwise,
-  Rocket,
+  ArrowRightIcon,
+  CheckIcon,
+  CaretDownIcon,
+  CopyIcon,
+  DownloadSimpleIcon,
+  GithubLogoIcon,
+  OpenAiLogoIcon,
+  CircleNotchIcon,
+  ArrowCounterClockwiseIcon,
+  RocketIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { ClaudeIcon, CursorIcon } from '~/components/CopyPageDropdown'
@@ -452,11 +452,11 @@ export function ApplicationStarter({
       disabled={!canUseFinalActions}
     >
       {isGeneratingPrompt ? (
-        <CircleNotch className="h-4 w-4 animate-spin" />
+        <CircleNotchIcon className="h-4 w-4 animate-spin" />
       ) : isPromptCopied ? (
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       ) : (
-        <Copy className="h-4 w-4" />
+        <CopyIcon className="h-4 w-4" />
       )}
       {isGeneratingPrompt
         ? loadingPhrase
@@ -477,11 +477,11 @@ export function ApplicationStarter({
       disabled={!canUseFinalActions}
     >
       {isGeneratingPrompt ? (
-        <CircleNotch className="h-4 w-4 animate-spin" />
+        <CircleNotchIcon className="h-4 w-4 animate-spin" />
       ) : isCommandCopied ? (
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       ) : (
-        <Copy className="h-4 w-4" />
+        <CopyIcon className="h-4 w-4" />
       )}
       {isGeneratingPrompt
         ? 'Preparing...'
@@ -545,7 +545,7 @@ export function ApplicationStarter({
         )}
       >
         {transientAction === action || waitingForHref ? (
-          <CircleNotch
+          <CircleNotchIcon
             className={twMerge(
               'animate-spin',
               iconOnly ? 'h-6 w-6' : size === 'xs' ? 'h-3.5 w-3.5' : 'h-4 w-4',
@@ -608,9 +608,9 @@ export function ApplicationStarter({
           aria-label={`Deploy to ${hostingDeployPartnerLabels[selectedHostingDeployPartner]}`}
         >
           {isDeployFeedbackActive || waitingForHref ? (
-            <CircleNotch className="h-4 w-4 animate-spin" />
+            <CircleNotchIcon className="h-4 w-4 animate-spin" />
           ) : (
-            <Rocket className="h-4 w-4" />
+            <RocketIcon className="h-4 w-4" />
           )}
           {isDeployFeedbackActive
             ? 'Opening...'
@@ -639,9 +639,9 @@ export function ApplicationStarter({
         aria-label={`Deploy to ${hostingDeployPartnerLabels[selectedHostingDeployPartner]}`}
       >
         {isDeployFeedbackActive ? (
-          <CircleNotch className="h-4 w-4 animate-spin" />
+          <CircleNotchIcon className="h-4 w-4 animate-spin" />
         ) : (
-          <Rocket className="h-4 w-4" />
+          <RocketIcon className="h-4 w-4" />
         )}
         {isDeployFeedbackActive ? 'Opening...' : 'Deploy'}
       </Button>
@@ -858,7 +858,7 @@ export function ApplicationStarter({
                       type="submit"
                       disabled={!canRevealOptions}
                     >
-                      <ArrowRight className="h-4 w-4" />
+                      <ArrowRightIcon className="h-4 w-4" />
                       Next
                       {enableHotkeys ? (
                         <SubmitShortcutHint isMac={isMacShortcutPlatform} />
@@ -1089,7 +1089,7 @@ export function ApplicationStarter({
                             onClick={resetHomeBuilder}
                             className="rounded-lg border-0 bg-transparent text-xs font-medium text-gray-500 shadow-none hover:bg-gray-950/5 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
                           >
-                            <ArrowCounterClockwise className="h-3.5 w-3.5" />
+                            <ArrowCounterClockwiseIcon className="h-3.5 w-3.5" />
                             Start over
                           </Button>
                         ) : isHomePayoffLoading ? (
@@ -1111,7 +1111,7 @@ export function ApplicationStarter({
                             className="rounded-[11px] border-transparent bg-[linear-gradient(117deg,#ff5f5f,#ffa05c,#fff27c,#74dcff)] font-ds-display font-bold text-ds-neutral-500 shadow-md transition-[filter] hover:text-ds-neutral-500 hover:brightness-105 disabled:grayscale"
                           >
                             Go
-                            <ArrowRight className="h-4 w-4" />
+                            <ArrowRightIcon className="h-4 w-4" />
                           </Button>
                         )}
                       </div>
@@ -1128,7 +1128,7 @@ export function ApplicationStarter({
                             className="rounded-[11px] border-transparent bg-[linear-gradient(117deg,#ff5f5f,#ffa05c,#fff27c,#74dcff)] font-ds-display font-bold text-ds-neutral-500 shadow-md transition-[filter] hover:text-ds-neutral-500 hover:brightness-105 disabled:grayscale"
                           >
                             Go
-                            <ArrowRight className="h-4 w-4" />
+                            <ArrowRightIcon className="h-4 w-4" />
                             {enableHotkeys ? (
                               <SubmitShortcutHint
                                 isMac={isMacShortcutPlatform}
@@ -1319,7 +1319,7 @@ export function ApplicationStarter({
                                       className:
                                         'border-[#00AD9F] bg-[#00AD9F] text-white hover:bg-[#009a8e]',
                                       href: netlifyStartHref,
-                                      icon: <Rocket className="h-4 w-4" />,
+                                      icon: <RocketIcon className="h-4 w-4" />,
                                       label: secondaryActionLabel,
                                       onTrack: () => {
                                         trackActivation({
@@ -1337,7 +1337,7 @@ export function ApplicationStarter({
                                   className:
                                     'border-gray-900 bg-gray-900 text-white hover:bg-gray-800 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-gray-200',
                                   href: codexStartHref,
-                                  icon: <OpenAiLogo className="h-4 w-4" />,
+                                  icon: <OpenAiLogoIcon className="h-4 w-4" />,
                                   label: 'Open in Codex',
                                   onTrack: () => {
                                     trackActivation({
@@ -1376,7 +1376,7 @@ export function ApplicationStarter({
                                     'text-text-secondary hover:text-text-primary',
                                   href: codexStartHref,
                                   icon: (
-                                    <OpenAiLogo
+                                    <OpenAiLogoIcon
                                       className="h-6 w-6"
                                       weight="regular"
                                     />
@@ -1447,9 +1447,9 @@ export function ApplicationStarter({
                                     className="text-text-secondary hover:text-text-primary"
                                   >
                                     {transientAction === 'clone' ? (
-                                      <CircleNotch className="h-6 w-6 animate-spin" />
+                                      <CircleNotchIcon className="h-6 w-6 animate-spin" />
                                     ) : (
-                                      <GithubLogo
+                                      <GithubLogoIcon
                                         className="h-6 w-6"
                                         weight="regular"
                                       />
@@ -1463,7 +1463,7 @@ export function ApplicationStarter({
                                     'text-text-secondary hover:text-text-primary',
                                   href: downloadHref,
                                   icon: (
-                                    <DownloadSimple
+                                    <DownloadSimpleIcon
                                       className="h-6 w-6"
                                       weight="regular"
                                     />
@@ -1550,7 +1550,7 @@ function StarterCustomizationSection({
           )}
         >
           {title}
-          <CaretDown
+          <CaretDownIcon
             className={twMerge(
               'h-3 w-3 transition-transform duration-200',
               open && 'rotate-180',

src/components/AuthenticatedUserMenu.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import {
-  CaretDown,
-  Gear,
-  Lock,
-  SignOut,
-  Sparkle,
-  Key,
+  CaretDownIcon,
+  GearIcon,
+  LockIcon,
+  SignOutIcon,
+  SparkleIcon,
+  KeyIcon,
 } from '@phosphor-icons/react'
 import { Avatar } from '~/components/Avatar'
 import {
@@ -47,7 +47,7 @@ export function AuthenticatedUserMenu({
             size="xs"
             className="w-[26px] h-[26px]"
           />
-          <CaretDown className="w-3 h-3 opacity-50" />
+          <CaretDownIcon className="w-3 h-3 opacity-50" />
         </div>
       </DropdownTrigger>
       <DropdownContent align="end">
@@ -57,13 +57,13 @@ export function AuthenticatedUserMenu({
         <DropdownSeparator />
         <DropdownItem asChild>
           <Link to="/account" className="flex items-center gap-2">
-            <Gear className="w-4 h-4" />
+            <GearIcon className="w-4 h-4" />
             <span>Account</span>
           </Link>
         </DropdownItem>
         <DropdownItem asChild>
           <Link to="/account/submissions" className="flex items-center gap-2">
-            <Sparkle className="w-4 h-4" />
+            <SparkleIcon className="w-4 h-4" />
             <span>My Showcases</span>
           </Link>
         </DropdownItem>
@@ -73,22 +73,22 @@ export function AuthenticatedUserMenu({
               to="/account/integrations"
               className="flex items-center gap-2"
             >
-              <Key className="w-4 h-4" />
+              <KeyIcon className="w-4 h-4" />
               <span>Integrations</span>
             </Link>
           </DropdownItem>
         )}
         {canAdmin && (
           <DropdownItem asChild>
             <Link to="/admin" className="flex items-center gap-2">
-              <Lock className="w-4 h-4" />
+              <LockIcon className="w-4 h-4" />
               <span>Admin</span>
             </Link>
           </DropdownItem>
         )}
         <DropdownSeparator />
         <DropdownItem onSelect={onSignOut}>
-          <SignOut className="w-4 h-4" />
+          <SignOutIcon className="w-4 h-4" />
           <span>Sign out</span>
         </DropdownItem>
       </DropdownContent>