Bohdan Triapitsyn
68f1c1efe3
Keep always-on instructions concise and route specialized work through focused skills. Split large skills into progressive references and add dedicated change, desktop, sync, and performance guidance.
1.7 KiB
1.7 KiB
Icon System
Contract
Use Icon from @/components/icon/Icon and IconName from @/components/icon/icons. Do not import icon components directly from @remixicon/react.
import { Icon } from '@/components/icon/Icon';
import type { IconName } from '@/components/icon/icons';
<Icon name="arrow-down-s" className="size-4" />
Icon has no size prop. Size it with classes.
Naming
Convert Remixicon names to sprite names:
- Remove
Ri. - Remove the
Linesuffix. - Convert PascalCase to lowercase kebab-case.
- Preserve filled variants with explicit
-fill.
| Remixicon | Sprite name |
|---|---|
RiArrowDownSLine |
arrow-down-s |
RiCheckLine |
check |
RiLoader4Line |
loader-4 |
RiGithubFill |
github-fill |
Config Values
Store icon names, not component references:
const items: Array<{ icon: IconName }> = [{ icon: 'stack' }];
return <Icon name={items[0].icon} className="size-4" />;
Use literal inference (as const) only when the surrounding type does not already provide IconName.
Adding An Icon
- Use the correct kebab-case name in source.
- Type non-JSX values as
IconName. - Run
bun run icons:generate. - Inspect generated changes and run relevant type-check/build validation.
Never edit packages/ui/src/components/icon/sprite.ts manually. The generator scans source usages, maps names to Remixicon, and regenerates the sprite.
Key Files
- Component:
packages/ui/src/components/icon/Icon.tsx - Types:
packages/ui/src/components/icon/icons.ts - Generated sprite:
packages/ui/src/components/icon/sprite.ts - Generator:
scripts/generate-icon-sprite.mjs - Documentation:
packages/ui/src/components/icon/README.md