Icon

アイコンは lucide のものです

lucide のアイコンを使います。実行時の依存を持たず、必要なものだけがバンドルに含まれます。

このシステムが持つのはサイズ・読み上げの既定・data-sg-component の付与だけです。 アイコンそのものは lucide のものです。

lucide-react は一緒にインストールされます

Icon を追加すると lucide-react も一緒にインストールされます。自分で入れる必要はありません。

ただしここに無いアイコンを足すときは、利用側が lucide-react から import します—— アイコンそのものは lucide のものだからです。

ここに無いアイコンは、同じ形で足せます

包む形を公開しています。全部を持たない代わりに、足す道を配ります。

import { Search } from 'lucide-react';
import { defineIcon } from '@sashigane/ui';

export const IconSearch = defineIcon(Search);

props は lucide のものをそのまま引き継ぎます。

data-sg-component の値はアイコンの名前から導きます。 Search なら icon-search、 ChevronDown なら icon-chevron-down です。手で書きません—— 書くと2箇所に同じことが並び、片方だけ直したときに静かにずれます。

既定は読み上げから隠れます

アイコンはたいてい文字の隣にあり、同じことを言っています。 隠さないと二重に読まれます。

名前を渡したときだけ隠れません。

<IconX />                    {/* 飾り。読み上げに出ません */}
<IconX aria-label="閉じる" /> {/* アイコンだけで意味を伝える場所 */}

大きさは段で選びます

className で大きさは上書きできません。 同じ次元を上書きしたとき、 どちらが効くかをこのシステムは保証していないためです—— 実際 size-4 を渡しても既定に負けます。段にすれば、負ける形が生まれません。

size は通していません

lucide は width / height の属性で書きますが、こちらはクラスで書きます。 CSS は属性に勝つので、size を渡しても何も起きないまま消えます。