アイコン

CodeConnect Design Systemでは、Lucide Iconsを採用しています。Lucideは、美しく一貫性のあるオープンソースのアイコンライブラリで、1000以上のアイコンを提供しています。

アイコンライブラリ

デザインシステムでは lucide-react を使用しています。Reactコンポーネントとして、動的なアイコン表示を実現します。

pnpm add lucide-react

よく使うアイコン

以下は、デザインシステムでよく使用されるアイコンの一覧です：

ナビゲーション & UI

home

chevron-down

chevron-right

arrow-right

settings

user

more-horizontal

external-link

link

ステータス & フィードバック

check

check-circle

alert-circle

alert-triangle

x-circle

info

help-circle

loader

アクション

plus

minus

edit

trash

download

upload

copy

refresh-cw

save

コンテンツ

file

folder

image

calendar

mail

message-circle

phone

video

使用方法

import { Home, Check, AlertCircle, Info } from 'lucide-react'

function MyComponent() {
  return (
    <div>
      {/* 基本的な使い方 */}
      <Home className="w-6 h-6" />

      {/* カラーを指定 */}
      <Check className="w-6 h-6 text-brand" />

      {/* サイズとストローク幅 */}
      <AlertCircle className="w-8 h-8" strokeWidth={1.5} />

      {/* インラインスタイル */}
      <Info
        className="w-6 h-6"
        style={{ color: 'var(--color-brand-base)' }}
      />
    </div>
  )
}

サイズバリエーション

アイコンのサイズは、Tailwindのサイズクラスで制御します。

w-4 h-4
16px

w-5 h-5
20px

w-6 h-6
24px

w-8 h-8
32px

w-12 h-12
48px

w-16 h-16
64px

アイコンのベストプラクティス

効果的なアイコン使用

アクセシビリティ

アイコンのアクセシビリティ

装飾的なアイコン（意味を持たない）:

<Icon name="lucide:star" aria-hidden="true" class="w-4 h-4" />

意味を持つアイコン（ラベルなし）:

<button aria-label="検索">
<Icon name="lucide:search" class="w-5 h-5" />
</button>

推奨: アイコン + ラベル:

<button>
<Icon name="lucide:search" class="w-5 h-5" />
<span>検索</span>
</button>

もっとアイコンを探す

Lucideアイコンライブラリ

1000以上のアイコンが利用可能です。公式サイトで検索・プレビューできます。

Lucideアイコンを見る

次のステップ