Tùy chỉnh

Màu, huy hiệu, kích thước và chuyển động của biểu tượng được đặt qua prop và thuộc tính tùy chỉnh CSS.

Màu

Mọi màu của một biểu tượng được tính từ một màu chủ đạo. Mặc định màu chủ đạo là currentColor, nên bạn có thể đổi bằng cách đặt thuộc tính CSS color trên biểu tượng hoặc trên bất kỳ phần tử cha nào:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

Màu được tính bằng color-mix() của CSS, nên transition trên color sẽ chuyển mờ mọi dải chuyển màu:

css

.kubai-icon { transition: color .3s ease; }

Huy hiệu

Biểu tượng có huy hiệu, như folder-plus hoặc user-check, có một huy hiệu ở một góc. Mặc định huy hiệu là đĩa tối với ký hiệu trắng. badgeColor đổi màu của đĩa. badgeColor="semantic" chọn màu phù hợp với từng huy hiệu: xanh lục cho thêm và hoàn tất, đỏ cho xóa và hủy, hổ phách cho cảnh báo.

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

Thuộc tính tùy chỉnh CSS

Đặt các giá trị này trên biểu tượng hoặc trên bất kỳ phần tử cha nào để ghi đè từng sắc độ. Nét là các đường và ký hiệu được vẽ trên biểu tượng.

Thuộc tính	Điều khiển
`--ki-c`	Màu gốc cho các dải chuyển màu và nét sáng. Mặc định: `currentColor`.
`--ki-e`	Màu gốc cho đường viền và nét tối. Mặc định: `--ki-c`.
`--ki-w`	Màu của các nét vốn mặc định là màu trắng.
`--ki-b`	Màu của đĩa huy hiệu. Mặc định: xám đậm trung tính.
`--ki-l`	Mức độ các vùng tô đặc lớn nhạt dần sang trắng về phía trên, từ 0% đến 100%.

variant="soft" đặt tất cả các giá trị này trừ --ki-b.

Đặt kiểu cho cả trang

Kiểu được kế thừa, giống như color. Đặt nó trên bất kỳ phần tử nào, và mọi biểu tượng bên trong sẽ theo, trừ khi biểu tượng có variant riêng. Thiết lập gần hơn luôn được ưu tiên: prop của chính biểu tượng, rồi đến phần tử gần nhất, rồi đến color mặc định.

tsx

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

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

Cùng đối tượng này dùng được trong Vue với :style. Khi không dùng framework, hãy gọi setVariant:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

Tệp SVG tĩnh có màu được ghi sẵn, nên hãy chọn kiểu theo thư mục: svg/ hoặc svg-soft/.

Kích thước

Đặt kích thước bằng prop size. Từ 24px trở xuống, nên dùng biểu tượng gốc thay cho biểu tượng có huy hiệu vì huy hiệu có ít chỗ. Canvas được mô tả trong Ngôn ngữ thiết kế.

Chuyển động

Mọi chuyển động chạy trong 460ms với cubic-bezier(.22, 1, .36, 1) và bắt đầu từ vị trí hiện tại của biểu tượng, nên có thể đảo chiều giữa chừng. Khi prefers-reduced-motion được bật, biểu tượng chuyển thẳng đến tư thế cuối mà không có hiệu ứng.