Iconography

Iconography

1thay thiết lập quy tắc cực kỳ chặt chẽ về việc sử dụng Icon nhằm tạo sự phân định rõ ràng trong trải nghiệm người dùng. Chúng tôi sử dụng 2 bộ icon song song với mục đích khác nhau:

1. IBM Carbon (Shape Fill / Solid): Dành riêng cho các thành phần UI chức năng, khối tính năng (Features), hoặc để nhấn mạnh nội dung.
2. Lucide (Line Stroke / Viền): Dành riêng cho thanh điều hướng (Navigation), Sidebar, Menu, hoặc các nút hành động dạng text.

Cách chèn Icon

Dự án đã tích hợp astro-icon để tải icon tự động. Bạn chỉ cần gọi component <Icon /> với tên icon tương ứng.

---
import { Icon } from 'astro-icon/components';
---

<!-- Icon UI từ bộ Carbon -->
<Icon name="carbon:settings" size={32} class="text-primary" />

<!-- Icon Điều hướng từ bộ Lucide -->
<Icon name="lucide:home" size={24} />

Demo Trực quan

IBM Carbon

Hình khối đặc (Fill) cho khối nội dung UI mạnh mẽ.

Lucide

Nét mảnh (Line stroke) thanh thoát cho thanh Navigation.