소개

Kubai Icons는 호버 모션이 있는 레이어드 SVG 아이콘의 오픈소스 라이브러리입니다. 이 페이지에서는 패키지 목록과 아이콘의 이름 및 버전 규칙을 설명합니다.

각 아이콘은 모든 색조를 하나의 강조 색상에서 가져옵니다. 마우스를 올리면 사물이 하는 동작을 보여 줍니다. 폴더가 열리고 봉투의 봉인이 열립니다. 각 아이콘은 독립된 ES 모듈이며, 정지 상태인 레스트 포즈의 SVG 마크업과 호버 모션을 담고 있습니다.

패키지

패키지	용도	문서
`kubai-icons-react`	React 18 이상과 Next.js(서버 렌더링 포함)	React 패키지
`kubai-icons-vue`	Vue 3.3 이상과 Nuxt	Vue 패키지
`kubai-icons`	순수 JavaScript와 `<kubai-icon>` 웹 컴포넌트	JavaScript 패키지
`kubai-icons-static`	`<img>` 태그, 디자인 도구, JavaScript 없는 페이지용 SVG 파일	정적 SVG 패키지

빠른 시작

이 예시는 React를 사용합니다. 다른 환경은 위에 나열된 패키지를 참고하세요. 패키지를 설치합니다.

bash

npm install kubai-icons-react

그다음 필요한 아이콘을 가져옵니다.

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 */}
    </>
  );
}

아이콘 이름

아이콘 이름은 영어이며 케밥 케이스입니다. folder, cloud-rain, arrow-up-right가 그 예입니다. JavaScript, React, Vue 패키지는 이를 CloudRain처럼 파스칼 케이스로 내보내며, React와 Vue는 CloudRainIcon도 내보냅니다. 정적 파일은 케밥 케이스 이름을 유지합니다. 아이콘 탐색기에서 이름과 태그를 검색할 수 있습니다.

많은 기본 아이콘은 folder-plus, user-check, calendar-clock처럼 배지 아이콘으로도 제공됩니다. 끌 수 있는 대상의 아이콘은 bell-off처럼 사선이 있는 아이콘으로도 제공됩니다.

버전 관리

패키지는 유의적 버전(semantic versioning)을 따르며 함께 릴리스됩니다. 아이콘 이름을 바꾸거나 삭제하는 것은 호환성을 깨는 변경이고, 다시 그리는 것은 그렇지 않습니다. 릴리스 노트는 GitHub에 게시됩니다.