Giới thiệu

Kubai Icons là thư viện mã nguồn mở gồm các biểu tượng SVG nhiều lớp có chuyển động khi rê chuột. Trang này liệt kê các gói và giải thích cách đặt tên và đánh số phiên bản biểu tượng.

Mỗi biểu tượng lấy mọi sắc độ từ một màu chủ đạo. Khi rê chuột, biểu tượng diễn lại điều mà đồ vật đó làm: thư mục mở ra, phong bì được bóc ra. Mỗi biểu tượng là một module ES riêng, chứa mã SVG của trạng thái tĩnh, gọi là tư thế nghỉ, và chuyển động khi rê chuột.

Gói

Gói	Dùng cho	Tài liệu
`kubai-icons-react`	React 18+ và Next.js, gồm cả kết xuất phía máy chủ	Gói React
`kubai-icons-vue`	Vue 3.3+ và Nuxt	Gói Vue
`kubai-icons`	JavaScript thuần và web component `<kubai-icon>`	Gói JavaScript
`kubai-icons-static`	Tệp SVG cho thẻ `<img>`, công cụ thiết kế và trang không dùng JavaScript	Gói SVG tĩnh

Bắt đầu nhanh

Ví dụ này dùng React. Với môi trường khác, xem các gói được liệt kê ở trên. Cài đặt gói:

bash

npm install kubai-icons-react

Sau đó nhập các biểu tượng bạn cần:

tsx

import { Folder, MailPlus } from "kubai-icons-react";

export default function App() {
  return (
    <>
      <Folder />                                 {/* 24px, in the text color */}
      <MailPlus size={32} color="#EC4899" />     {/* any CSS color */}
    </>
  );
}

Tên biểu tượng

Tên biểu tượng bằng tiếng Anh, viết theo kebab-case: folder, cloud-rain, arrow-up-right. Các gói JavaScript, React và Vue xuất chúng theo PascalCase, như CloudRain. React và Vue còn xuất CloudRainIcon. Tệp tĩnh giữ tên kebab-case. Trình duyệt biểu tượng tìm theo tên và thẻ.

Nhiều biểu tượng gốc cũng có phiên bản kèm huy hiệu, như folder-plus, user-check và calendar-clock. Biểu tượng của những thứ có thể tắt cũng có phiên bản gạch chéo, như bell-off.

Đánh số phiên bản

Các gói theo semantic versioning và được phát hành cùng nhau. Đổi tên hoặc xóa một biểu tượng là thay đổi gây lỗi tương thích; vẽ lại thì không. Ghi chú phát hành được đăng trên GitHub.