Iconography

ADR-UI-001 chọn Hugeicons qua wrapper của package. Không có file nào trong 01_foundations/ nói về icon trước ngày 2026-09-23 — lưới, nét, thang cỡ, quy tắc đặt tên và luật icon-only không được viết ở đâu trong corpus thị giác trước trang này. DS-010 clause 8 thêm file này làm trang nền tảng thứ chín.

Màu icon không có token riêng và không được có: icon thừa hưởng currentColor từ chữ quanh nó, nên nó đúng màu trong mọi theme và mọi scope nghịch đảo mà không cần biết mình đang ở đâu.

Hai bậc, không phải năm. 20px là icon mang nội dung (cảnh báo, toast, thẻ số). 16px (small) là dấu nằm cùng hàng chữ ui hoặc caption — mũi tên Select, dấu chọn, tìm kiếm, accordion.

Một control chỉ có icon có vùng chạm bằng kích thước control, tối thiểu 44px. Icon 20px nằm giữa vùng đó. Số đo dưới đây đọc hộp thật của nút đang render, không phải một con số chép ra.

Hugeicons là bộ icon duy nhất. Import qua @nexobox/ui/icons/<Icon>. Chỉ packages/ui/src/icons/glyphs/<Icon>.ts được deep-import file gốc của Hugeicons.eslint.config.mjs chặn @hugeicons/core-free-icons ở mọi nơi khác.

Icon đặt aria-hidden="true" khi không có title. Khi có title, nó đặt role="img" và aria-label. Một icon được đặt tên cạnh một nhãn chữ làm screen reader đọc hai lần. Một control chỉ có icon thì tên trợ năng thuộc về control, không phải icon.

Cỡ và nét đọc từ --nf-foundation-size-icon, -icon-small, --nf-foundation-stroke-icon. HugeiconsIcon đòi size và strokeWidth là số nên một var() không truyền vào được — wrapper giải bằng cách đặt width, height và stroke-width thật bằng class đọc token trên cùng <svg>, thắng attribute nội tại. Ba prop size, strokeWidth, color là cửa thoát cho specimen tài liệu, không phải API sản phẩm.

Một control chỉ có icon có vùng chạm bằng kích thước control, tối thiểu --nf-foundation-size-touch-target (44px). 20px là kích thước hình, không phải kích thước đích. Con trỏ thô vẫn thắng: ở pointer: coarse, control về comfortable dù compact đang bật, nhưng icon không to ra theo.

Tên glyph giữ nguyên tên của Hugeicons. Một glyph chỉ vào repo khi có một caller thật cần nó — glyphs/ không phải bản sao của bộ Hugeicons. Icon mang nghĩa vận hành phải được chọn một lần rồi dùng nhất quán; hai icon khác nhau cho cùng một trạng thái ở hai bề mặt là một khiếm khuyết, không phải một biến thể.