ui4

Payload UI Reskin (ui4)

Figma URL is REQUIRED. If not provided, ask before proceeding.

---

Process

Step 0: Icon Scan

Goal: Identify icon dependencies before starting work.

1. Scan component files for icon imports:

   grep -E "from.*icons|import.*Icon" packages/ui/src/elements/ComponentName/
   

2. List existing icons in packages/ui/src/icons/:

   • Each icon has its own folder with index.tsx + index.css

3. Compare Figma design to available icons:

   • Does the design use icons not currently in the component?
   • Does the design use icons that don't exist yet?

4. Document findings:

   • Existing & used: No action needed
   • Existing but not imported: Will need to add import
   • Missing from codebase: Flag for user — need to source/create icon

Figma Icons Source:

When updating or creating icons, reference the Figma icon library at:

~/figma/figma/fpl/icons/src/icons/

Icon naming convention: icon-{size}-{name}.tsx (e.g., icon-16-close.tsx, icon-24-chevron-down.tsx)

To find the correct icon:

1. Note the icon name from Figma design (e.g., "close", "chevron-down")
2. Check both 16px and 24px variants if they exist
3. Read the corresponding files and extract the SVG paths for each size

Icon implementation rules:

1. Props: Icon components MUST accept these props (keep existing props when updating):

   type IconProps = {
     readonly className?: string
     readonly size?: 16 | 24 // Add more sizes as needed
     // ... keep any existing component-specific props
   }
   

2. Multi-size support: Store path data keyed by size:

   const paths = {
     16: 'M4.854 4.146...', // from icon-16-{name}.tsx
     24: 'M6.854 6.146...', // from icon-24-{name}.tsx
   }
   

3. SVG rendering: Use the size prop to select path and viewBox:

   <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
     <path d={paths[size]} fill="currentColor" />
   </svg>