Icon component

[mathieusouflis]

What to build

A thin wrapper around Solar Icons that exposes a consistent size and color API driven by design tokens.

Set up:

• Icon component with props: name (Solar icon name union type), size (maps to spacing tokens: sm/md/lg/xl or raw pixel value), variant (Solar style: linear/bold/outline/broken), color (defaults to currentColor)
• solar-icon-set declared as a peer dependency — consuming apps install it directly to control which icon styles are bundled
• Full TypeScript types for name (autocomplete from Solar Icons enum/union) and other props
• Storybook story showing all variants and sizes

Tests (Vitest + Testing Library):

• Unknown name value does not crash — renders nothing or a fallback without throwing
• size prop maps to correct pixel dimensions

Acceptance criteria

• <Icon name="Home" size="md" variant="linear" /> renders the correct Solar icon
• size prop values (sm/md/lg/xl) map to consistent pixel dimensions via spacing tokens
• Unknown icon name does not throw — fails gracefully
• TypeScript autocomplete works for name prop
• solar-icon-set is in peerDependencies, not dependencies
• Storybook story renders all four variants

Blocked by

• Token system + PandaCSS preset #3 (Token system + PandaCSS preset)