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`
|