はじめに

Kubai Icons は、ホバー時にモーションが付く、レイヤー構造の SVG アイコンのオープンソースライブラリです。このページでは、パッケージの一覧と、アイコンの命名とバージョニングを説明します。

各アイコンは、すべての色合いを 1 つのアクセントカラーから取ります。ホバーすると、そのモノの動きを演じます。フォルダが開き、封筒の封が開きます。各アイコンは独立した ES モジュールで、静止状態の SVG マークアップ (静止ポーズ) とホバー時のモーションを持っています。

パッケージ

パッケージ	用途	ドキュメント
`kubai-icons-react`	React 18 以降と Next.js (サーバーレンダリング対応)	React パッケージ
`kubai-icons-vue`	Vue 3.3 以降と Nuxt	Vue パッケージ
`kubai-icons`	プレーンな JavaScript と `<kubai-icon>` Web コンポーネント	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 のような斜線付きのアイコンもあります。

バージョニング

パッケージはセマンティックバージョニングに従い、まとめてリリースされます。アイコンの名前の変更や削除は破壊的変更で、描き直しは破壊的変更ではありません。リリースノートは GitHub で公開されています。