ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
56 lines
1.5 KiB
Markdown
56 lines
1.5 KiB
Markdown
# Icons
|
||
|
||
## Libraries
|
||
|
||
| Library | Use |
|
||
| --- | --- |
|
||
| `lucide-react` | Default UI icons (nav, actions, social) |
|
||
| `@iconify/react` | Occasional extended sets when Lucide lacks a glyph |
|
||
|
||
Do not mix many icon libraries in one view. Prefer Lucide for consistency.
|
||
|
||
## Sizing
|
||
|
||
| Context | Size |
|
||
| --- | --- |
|
||
| Inline with `text-sm` | `size-4` (16px) |
|
||
| Buttons (default) | Controlled by `--btn-icon-size` (0.875–1.25rem) |
|
||
| Icon buttons | Match button box; glyph ~20px (`size-5`) for menu |
|
||
| Cards / features | `size-5` / `size-6` |
|
||
| Decorative empty states | `size-8`–`size-10` max |
|
||
|
||
Use Tailwind `size-*` from the spacing scale. Avoid arbitrary `w-[18px]`.
|
||
|
||
## Color
|
||
|
||
- Inherit from parent text (`currentColor`) whenever possible.
|
||
- Semantic: `text-muted-foreground`, `text-primary`, `text-destructive`.
|
||
- Never hardcode icon hex fills in JSX.
|
||
|
||
## Alignment
|
||
|
||
- Pair icons with labels using flex + `gap-2` / button gaps.
|
||
- Decorative icons: `aria-hidden`.
|
||
- Standalone icon buttons: mandatory `aria-label` (or visible text).
|
||
|
||
```tsx
|
||
<Button variant="ghost" size="icon" aria-label="باز کردن منو">
|
||
<Menu aria-hidden className="size-5" />
|
||
</Button>
|
||
```
|
||
|
||
## Stroke
|
||
|
||
Lucide defaults are fine. Do not globally remount icons with custom stroke widths that fight the set.
|
||
|
||
## Forbidden
|
||
|
||
- Emoji as UI icons.
|
||
- PNG icons for simple glyphs.
|
||
- Different visual weights in the same toolbar.
|
||
|
||
## Related
|
||
|
||
- [buttons.md](./buttons.md)
|
||
- [accessibility.md](./accessibility.md)
|