Biểu tượng

Chỉ dùng Lucide

Lucide đã lên v1 — icon thương hiệu không còn

Số phiên bản nhảy từ 0.x lên 1.x mà không đổi API của icon, vì vậy gói khai peer là >=0.540.0. Thứ v1 thực sự đổi là bộ icon: các icon thương hiệu và logo của bên thứ ba đã bị gỡ. Import một icon như vậy là lỗi build, không phải một glyph bị thiếu.

Vài tên cũ vẫn còn dưới dạng alias đã ngừng dùng — Loader2 vẫn trỏ tới LoaderCircle, AlertCircle tới CircleAlert. Mã mới viết tên của v1.

Lưới kích cỡ

Cỡ icon lấy từ thang khoảng cách, không phải thang chữ. Nhờ vậy trục cỡ chữ di chuyển icon và nhãn cùng nhau: ở bậc lớn, icon size-4 to lên cùng nhãn 16px bên cạnh, thay vì đứng yên trong khi nhãn phình ra.

Tự định cỡ

Hai mươi mốt chỗ trong mười một họ component mang [&_svg:not([class*='size-'])]:size-4— hàng menu và command, trigger và mục của Select, ItemMedia, addon của InputGroup, ButtonGroupText, link của NavigationMenu, Toggle, và nút đóng của Dialog. Một icon đặt vào một trong những chỗ đó mà không có class cỡ riêng sẽ hiện ở 16px, nên ghi rõ size-4 ở đó là thừa, còn size-5 thì thật sự ghi đè.

Button cố ý không nằm trong số đó: nó đặt khe hở và cỡ chữ nhưng không áp gì lên svg con, nên icon trong nút giữ cỡ mặc định 24px của Lucide cho tới khi được định cỡ. Cho nó một class size-*, hoặc prop size khi nó đi qua leftIcon / rightIcon.

Màu icon theo hợp đồng màu

Lucide vẽ bằng stroke="currentColor", nên icon lấy màu chữ của thứ chứa nó. Vì vậy hợp đồng ba vai trò áp dụng y nguyên — và cũng có nghĩa là trình biên dịch không thấy được lựa chọn sai.

Truyền icon vào component

Các component shell nhận icon — mục điều hướng, mô tả app, mục thanh bên — nhận tham chiếu tới component chứ không nhận phần tử đã render, để chúng tự áp class cỡ và màu của mình lên icon.

import type { NavItem } from '@comitor/ui/shell'
import { LayoutDashboard } from 'lucide-react'

// The slot takes the COMPONENT, not an element:
//   icon: LayoutDashboard      ✓
//   icon: <LayoutDashboard />  ✗
const item: NavItem = {
  id: 'overview',
  label: 'Overview',
  href: '/tasks',
  icon: LayoutDashboard,
}

// The slot's type is ShellIcon = LucideIcon | ComponentType<{ className?: string }>,
// so a custom SVG wrapper that accepts className fits the same slot.

Icon mẫu — mặc định 16px

Nét và cách dùng