React

kubai-icons-react cung cấp mỗi biểu tượng dưới dạng một component React. Yêu cầu React 18 trở lên.

Cài đặt

bash

npm install kubai-icons-react

Cách dùng

Nhập biểu tượng theo tên và kết xuất như một component:

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Prop

Prop	Mặc định	Mô tả
`size`	24	Chiều rộng và chiều cao tính bằng pixel.
`color`	currentColor	Màu chủ đạo mà mọi dải chuyển màu, đường viền và nét đều được tạo từ đó. Xem Tùy chỉnh.
`variant`	kế thừa, nếu không thì "color"	`"soft"` dùng màu nền nhạt hơn và nét viền đậm hơn, đồng thời vẽ các nét trắng bằng tông màu tối.
`badgeColor`	xám đậm	Màu của đĩa huy hiệu: bất kỳ màu CSS nào, hoặc `"semantic"` để chọn màu phù hợp với từng huy hiệu, như xanh lục cho thêm, đỏ cho xóa và hổ phách cho cảnh báo.
`trigger`	"hover"	`"hover"` phát chuyển động khi rê chuột vào biểu tượng hoặc khi biểu tượng nhận tiêu điểm bàn phím. `"parent"` hoạt động tương tự với phần tử cha gần nhất có `data-kubai-trigger`, hoặc với phần tử cha trực tiếp nếu không có. `"none"` không thêm trình lắng nghe nào, nên chỉ prop `hover` mới phát chuyển động.
`hover`	Không	`true` phát chuyển động và `false` đảo ngược nó. Kết hợp với `trigger="none"` để kiểm soát hoàn toàn.
`active`, `defaultActive`, `onActiveChange`	Không	Trạng thái bật/tắt cho biểu tượng bật/tắt, loại chuyển giữa hai trạng thái khi nhấp hoặc chạm. `Bookmark` là một ví dụ.
`title`	Không	Tên trợ năng. Nếu không có, biểu tượng sẽ là `aria-hidden`. Xem Trợ năng.

Các prop SVG khác, như className, style, trình xử lý sự kiện và ref, được chuyển tiếp đến <svg>.

Kích hoạt từ phần tử cha

Để phát chuyển động khi rê chuột vào cả nút hoặc khi nút nhận tiêu điểm bàn phím, hãy thêm data-kubai-trigger vào nút và trigger="parent" vào biểu tượng:

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

Biểu tượng theo tên

Nếu chỉ biết tên biểu tượng khi chạy, chẳng hạn một giá trị từ API, hãy dùng DynamicIcon. Mỗi biểu tượng vẫn là một chunk riêng, nên bundle không chứa cả bộ.

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

Kết xuất phía máy chủ

Biểu tượng hoạt động trong Server Component và Client Component của Next.js mà không cần cấu hình. Mã được kết xuất trên máy chủ, còn chuyển động được thêm khi hydrate. DynamicIcon là ngoại lệ: nó kết xuất một phần giữ chỗ trống trên máy chủ và tải biểu tượng trong trình duyệt.

Nhập trực tiếp

Để tránh tải chỉ mục của gói trong máy chủ phát triển, hãy nhập biểu tượng từ tệp riêng của nó. Xem Hiệu năng.

tsx

import Folder from "kubai-icons-react/icons/folder";