kaze風
Logo
ロゴ
プレビュー
サイズ
kaze風
kaze風
kaze風
マークのみ
使いどころ
使う場面
- Navbar、Sidebar、LPFooter の先頭に置くブランド表示
- 狭い場所や既にサービス名が見える場所では showText={false} でマークだけにする
- size は sm、md、lg の 3 つ。ナビゲーションは md、LP の大きな見出し周りは lg
使わない場面
- 自社サービスのロゴの差し替え。Kaze の Logo は Kaze 自身のマークなので、自社のロゴは img や SVG を Navbar の logo スロットに渡す
- 意味を持つアイコンの代わり。Icon を使う
- ロゴの変形（色替え、回転、余白の削り）。currentColor で描かれるので、色は親の color で決める
使い方
<Logo size="md" />
<Logo size="sm" showText={false} />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | ロゴのサイズ |
showText | boolean | true | テキスト（kaze 風）を表示するかどうか |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- マークは aria-hidden で、文字 "kaze 風" が名前として読まれる
- showText={false} にすると読み上げる名前が無くなる。リンクで包む場合は、リンク側に aria-label="ホームへ" のような名前を付ける