Icon

Lucide IconsとFontAwesome/Heroiconsをラップした統一アイコンコンポーネント

インポート

import { Icon } from '@caroainc/ui-components'

基本的な使い方

<Icon name="Search" />
<Icon name="User" />
<Icon name="Settings" />

アイコンの種類

Caroa UIのIconコンポーネントは3種類のアイコンをサポートしています：

種類	ソース	例
Lucide	Lucide Icons	Search, User, Settings, Home
カスタム（variant対応）	FontAwesome 6	Heart, Star, Bookmark, Bell
ブランド	FontAwesome 6	Facebook, Twitter, Discord

サイズ

xs (12px)

sm (16px)

md (20px)

lg (24px)

xl (32px)

2xl (40px)

<Icon name="Star" size="xs" />   // 12px
<Icon name="Star" size="sm" />   // 16px
<Icon name="Star" size="md" />   // 20px（デフォルト）
<Icon name="Star" size="lg" />   // 24px
<Icon name="Star" size="xl" />   // 32px
<Icon name="Star" size="2xl" />  // 40px

バリアント（outline / filled）

一部のアイコンは variant propで表示を切り替えられます。

outline

filled

<Icon name="Heart" variant="outline" />  // アウトライン（デフォルト）
<Icon name="Heart" variant="filled" />   // 塗りつぶし

variant対応アイコン一覧

Heart

Star

Bookmark

Bell

Envelope

Comment

ThumbsUp

ThumbsDown

線の太さ（Lucideアイコン専用）

Lucideアイコンは weight propで線の太さを調整できます。

thin

light

regular

bold

<Icon name="Search" weight="thin" />
<Icon name="Search" weight="light" />
<Icon name="Search" weight="regular" />  // デフォルト
<Icon name="Search" weight="bold" />

weight はLucideアイコン専用です。カスタムアイコン（FontAwesome系）では効果がありません。 TypeScriptで型エラーが表示されます。

ブランドアイコン

SNSやサービスのブランドアイコンを使用できます。

<Icon name="Facebook" />
<Icon name="Instagram" />
<Icon name="TwitterX" />
<Icon name="Youtube" />
<Icon name="Discord" />
<Icon name="Slack" />
<Icon name="Line" />
<Icon name="TikTok" />

利用可能なブランドアイコン

アイコン名	説明
`Facebook`	Facebook
`Instagram`	Instagram
`TwitterX`	X (旧Twitter)
`Youtube`	YouTube
`Discord`	Discord
`Slack`	Slack
`Line`	LINE
`TikTok`	TikTok
`Threads`	Threads
`Spotify`	Spotify
`Google`	Google
`Figma`	Figma

ブランドアイコンは variant や weight を指定できません。 TypeScriptで型エラーが表示されます。

カスタムクラス

<Icon name="Heart" className="text-red-500" />
<Icon name="Check" className="text-green-500" />
<Icon name="Loader2" className="animate-spin" />

Props対応表

各propsがアイコンの種類によって有効かどうかを示します。

Props	Lucide	カスタム（variant対応）	ブランド
`name`	✅	✅	✅
`size`	✅	✅	✅
`className`	✅	✅	✅
`weight`	✅	❌ 型エラー	❌ 型エラー
`variant`	✅	✅	❌ 型エラー

Props

Prop	Type	Default	Description
`name*`	`IconName`	`-`	アイコン名。Lucide、カスタム、ブランドアイコンから選択
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	アイコンサイズ（12px〜40px）
`weight`	`'thin' \| 'light' \| 'regular' \| 'bold'`	`'regular'`	線の太さ（Lucideアイコン専用）
`variant`	`'outline' \| 'filled'`	`'outline'`	アウトラインまたは塗りつぶし（Lucide、カスタムアイコン）
`className`	`string`	`-`	追加のCSSクラス

よく使うLucideアイコン

Home

User

Settings

Mail

Check

Plus

Minus

ChevronDown

MoreHorizontal

Loader2

全てのLucideアイコンは lucide.dev/icons で確認できます。

Icon

On this page