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.
60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
# Icon System
|
|
|
|
## Contract
|
|
|
|
Use `Icon` from `@/components/icon/Icon` and `IconName` from `@/components/icon/icons`. Do not import icon components directly from `@remixicon/react`.
|
|
|
|
```tsx
|
|
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:
|
|
|
|
1. Remove `Ri`.
|
|
2. Remove the `Line` suffix.
|
|
3. Convert PascalCase to lowercase kebab-case.
|
|
4. 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:
|
|
|
|
```tsx
|
|
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
|
|
|
|
1. Use the correct kebab-case name in source.
|
|
2. Type non-JSX values as `IconName`.
|
|
3. Run `bun run icons:generate`.
|
|
4. 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`
|