Icons

Lucide 由来の線画アイコン。@kkhys/ui/icons/<name>.svg を import すると Astro の SVG コンポーネントになり、width / height / class /aria-* をそのまま渡せる。色は currentColor なので親の color に従う。全 12 個が viewBox 0 0 24 24、stroke-width 2、stroke currentColor、fill none。

Glyphs 12

searchSearchIcon検索を開くmememo@kkhys/search SearchDialogLucide
arrow-leftArrowLeftIcon戻るlgtm@kkhys/ui SiteHeaderLucide
move-up-rightMoveUpRightIcon外部リンクmeLucide
linkLinkIcon見出しのアンカーmeLucide
globeGlobeIconfavicon の代替@kkhys/ui LinkCardLucide
checkCheckIcon完了・チェック済みmelgtmLucide
copyCopyIconクリップボードへコピーlgtmLucide
infoInfoIconAlert: notemeLucide
lightbulbLightbulbIconAlert: tipmeLucide
message-square-warningMessageSquareWarningIconAlert: importantmeLucide
triangle-alertTriangleAlertIconAlert: warningmeLucide
octagon-alertOctagonAlertIconAlert: cautionmeLucide

Sizes

4 段。置く文脈で決まり、同じ文脈で別の値を増やさない。width / heightを属性で渡すか、アプリ側の CSS で同じ値を指定する。

12px本文中の記号外部リンク、見出しのアンカー、favicon の代替
14pxヘッダーSiteHeader の戻る
16pxブロックの先頭Alert、チェックボックス
18pxボタンlgtm のコピー・戻る、memo カード

Usage

使う
UI の記号(検索、戻る、外部リンク、コピー、状態)。同じ意味には同じ glyph。
使わない
ブランドロゴ(各アプリに置く)、装飾目的のイラスト、Lucide 以外のセットとの混在。
配慮
装飾は aria-hidden。アイコンしかない操作は親に aria-label。
src/components/search-button.astro
import SearchIcon from "@kkhys/ui/icons/search.svg";

{/* decorative: the label is the text next to it */}
<a href="/search">
  <SearchIcon width={12} height={12} aria-hidden="true" />
  検索
</a>

{/* meaningful: the icon is the only content, so the parent names it */}
<button type="button" aria-label="検索">
  <SearchIcon width={18} height={18} aria-hidden="true" />
</button>

Adding

Lucide の SVG をそのまま packages/ui/src/icons/ に置けば、この一覧には自動で載る。 意味と利用先だけ data/icons.ts に書く(未記載でも一覧には出る)。

追加手順
# 1. Lucide から SVG をそのまま置く(24 viewBox、stroke-width 2 のまま)
packages/ui/src/icons/<name>.svg

# 2. 意味と利用先を書く
apps/design/src/data/icons.ts