# Icon

Một bộ icon, hai biến thể, ba cỡ. Trộn nhiều biến thể là cách nhanh nhất khiến màn hình trông như làm dở, nên chỉ dùng outline và filled.

## Bộ icon

Docs và registry dùng Tabler Icons (MIT), nhưng bạn có thể dùng bất kỳ bộ icon hay font nào bạn muốn.

## Biến thể

Dùng outline ở mọi nơi. Chỉ dùng prop `filled` cho trạng thái đang chọn hoặc đang bật, còn trạng thái tắt dùng outline của cùng icon đó.

| Biến thể | Dùng cho |
| --- | --- |
| outline | Mặc định cho mọi icon. |
| `filled` | Trạng thái đang chọn hoặc đang bật: mục nav đang mở, nút icon đang bật, ngôi sao đã tô. |

Mục nav đang mở dùng icon filled, mục chưa mở dùng icon outline cùng hình.

Không đổi độ rộng `stroke`; hãy chọn một icon khác.

## Kích thước

12px cạnh chữ trong badge, 16px trong input, menu và control cỡ `sm`, `md` hoặc `lg`, 20px trong control cỡ `xl` và điều hướng.

| Cỡ | Ở đâu |
| --- | --- |
| 12px | Badge, cạnh chữ `font-size-xs`. |
| 16px | Input, select, mục menu, và control `sm`, `md` và `lg`. |
| 20px | Control `xl`, và điều hướng như sidebar và tab bar. |



Cỡ icon đi theo `size` của control, không theo loại con trỏ hay độ rộng màn hình. Cỡ khác, ví dụ trong trạng thái trống, cần được designer quyết định và phải là bội của 4px.

## Màu

Icon lấy màu từ các token icon, hoặc token on-color khi nằm trên nền đặc. Không viết cứng màu fill.

## Trong code

Luôn truyền `size`. Import tên có tiền tố `Icon` từ `@tabler/icons-react`; gói này dùng được trong cả Server và client components.

```tsx
import { IconHome } from "@tabler/icons-react"

<IconHome size={20} aria-hidden />
```

Đừng dựa vào mặc định 1.5em cho width và height. Đây là bộ mà docs và registry dùng, nhưng bất kỳ bộ icon hay icon font nào cũng dùng được: component nhận bất kỳ node React nào vẽ được SVG.