Icons
foundationこのデザインシステムに同梱されているアイコンの一覧です。53 種類を、どの画面でも同じ見た目で使えます。
サイズ
.icon-xs (12) / .icon-sm (16) / .icon-md (20) / .icon-lg (24) / .icon-xl (32)
xs
sm
md
lg
xl
着色
currentColor を継承するので text-* ユーティリティで色付け可能
同梱されているアイコン
アイコンが足りない場合は scripts/build-icons.mjs の ICONS 配列に追加
info
check-circle
alert-triangle
alert-circle
x-circle
plus
minus
x
check
pencil
trash-2
copy
download
upload
refresh-cw
send
chevron-up
chevron-down
chevron-left
chevron-right
chevrons-up-down
arrow-left
menu
more-horizontal
more-vertical
home
file
files
folder
folder-cog
link
external-link
image
user
users
smile
shield-check
medal
settings
help-circle
log-in
log-out
search
filter
hash
eye
eye-off
lock
calendar
clock
mail
bell
phone
使い方
consumer のプロダクトコードから
Vite / Next.js 等のバンドラ
import iconsUrl from "@light-right/design-system/icons";
<svg class="icon icon-md">
<use href={`${iconsUrl}#lucide-search`} />
</svg>
vanilla HTML
<svg class="icon icon-md"> <use href="./node_modules/@light-right/design-system/dist/icons.svg#lucide-search"></use> </svg>
機能
このコンポーネントの用途
Lucide スプライトからアイコンを表示するヘルパー。表示とサイズだけを担う。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓サイズは icon-{xs,sm,md,lg,xl}。色は currentColor 継承なので text-* で着色。
- ✓<use href="...#lucide-名前"> で参照する。
NG
- ✕色やサイズを #hex/px で直書きしない → text-* と icon-* を使う。
- ✕意味のあるアイコンを無ラベルで置かない → 必要なら aria-label を併記。