사용자 지정

아이콘 색상, 배지, 크기, 모션은 prop과 CSS 사용자 지정 속성으로 설정합니다.

색상

아이콘의 모든 색상은 하나의 강조 색상에서 계산됩니다. 기본 강조 색상은 currentColor이므로 아이콘이나 상위 요소에 CSS color 속성을 지정해 바꿀 수 있습니다.

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

색상은 CSS color-mix()로 계산되므로 color에 트랜지션을 지정하면 모든 그라디언트가 함께 전환됩니다.

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

배지

folder-plus나 user-check 같은 배지 아이콘은 한쪽 모서리에 배지가 있습니다. 배지는 기본적으로 흰색 기호가 있는 어두운 원입니다. badgeColor로 원의 색상을 바꿀 수 있습니다. badgeColor="semantic"은 배지마다 어울리는 색을 고릅니다. 추가와 완료는 초록, 삭제와 취소는 빨강, 경고는 주황입니다.

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

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

CSS 사용자 지정 속성

아이콘이나 상위 요소에 지정하면 개별 색조를 덮어씁니다. 표시는 아이콘 위에 그려진 선과 기호입니다.

속성제어
--ki-c그라디언트와 밝은 표시의 기본 색상입니다. 기본값: currentColor.
--ki-e윤곽선과 어두운 표시의 기본 색상입니다. 기본값: --ki-c.
--ki-w기본적으로 흰색인 표시의 색상입니다.
--ki-b배지 원의 색상입니다. 기본값: 중립적인 어두운 회색.
--ki-l넓은 단색 채우기가 위쪽으로 갈수록 흰색으로 옅어지는 정도이며 0%에서 100%까지입니다.

variant="soft"는 --ki-b를 제외한 이 값을 모두 설정합니다.

페이지 전체에 스타일 지정

스타일은 color처럼 상속됩니다. 아무 요소에나 지정하면 안에 있는 모든 아이콘이 따르며, 아이콘에 variant가 있으면 그 값이 우선합니다. 더 가까운 설정이 항상 우선합니다. 아이콘 자체의 prop, 가장 가까운 요소, 기본값 color 순입니다.

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

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

같은 객체를 Vue에서는 :style로 사용할 수 있습니다. 프레임워크 없이는 setVariant를 호출하세요.

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

setVariant(document.documentElement, "soft");

정적 SVG 파일에는 색상이 포함되어 있으므로 폴더로 스타일을 선택합니다. svg/ 또는 svg-soft/입니다.

크기

size prop으로 크기를 지정합니다. 배지가 들어갈 공간이 좁은 24px 이하에서는 배지 아이콘 대신 기본 아이콘을 사용하세요. 캔버스는 디자인 언어에서 설명합니다.

모션

모든 모션은 cubic-bezier(.22, 1, .36, 1)로 460ms 동안 실행되며 아이콘의 현재 위치에서 시작하므로 도중에 되돌릴 수 있습니다. prefers-reduced-motion이 설정되어 있으면 아이콘은 애니메이션 없이 바로 끝 포즈로 이동합니다.

Kubai Icons는 무료로 사용할 수 있습니다 프로젝트 후원