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ô. |
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.
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.