CSS: icon

.instui-icon — Hệ thống biểu tượng: kích thước .instui-icon cùng bộ vẽ chung -icon-<name> che một ký tự đồ họa (trong currentColor) trước bất kỳ phần tử nào.

Source: icon.css

Khả năng truy cập

Ký tự đồ họa mang tính trang trí, nên đánh dấu nó là aria-hidden="true"; chỉ cung cấp role hoặc nhãn khi biểu tượng tự nó truyền đạt ý nghĩa.

Sử dụng

@import "@pantoken/components/components.css";

Các ví dụ

<span class="instui-icon -icon-megaphone" aria-hidden="true"></span>

Bộ sửa

Bộ sửa	Mô tả
.-icon-*	Đặt token ký tự (--pantoken-glyph) và hiển thị nó qua bộ vẽ chung (ví dụ -icon-search).

Phần tử giả

Phần tử giả	Mô tả
::before	Bản thân ký tự: một hộp 1em được che từ --pantoken-glyph và được tô bằng currentColor.

Token tiêu thụ

Token	Kiểu	Giá trị
--pantoken-glyph	<url>	url("data:image/svg+xml