Caroa UI

Icon

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

インポート

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

基本的な使い方

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

アイコンの種類

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

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

サイズ

Loading...
<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で表示を切り替えられます。

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

variant対応アイコン一覧

Loading...

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

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

Loading...
<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やサービスのブランドアイコンを使用できます。

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

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

アイコン名説明
FacebookFacebook
InstagramInstagram
TwitterXX (旧Twitter)
YoutubeYouTube
DiscordDiscord
SlackSlack
LineLINE
TikTokTikTok
ThreadsThreads
SpotifySpotify
GoogleGoogle
FigmaFigma
ChromeGoogle Chrome
CodepenCodePen
CodesandboxCodeSandbox
DribbbleDribbble
FramerFramer
GithubGitHub
GitlabGitLab
LinkedinLinkedIn
PocketPocket
TrelloTrello
TwitterX（旧Twitter。TwitterXと同じ見た目。新規実装ではTwitterXを推奨）
TwitchTwitch

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

旧lucideアイコン名のエイリアス

lucide-react upstreamでリネーム・削除された一部のアイコン名は、後方互換のため引き続き<Icon name="旧名">で使用できます。内部的にはLucide解決パス（通常のstroke描画）を通るため、カスタムアイコン（塗りつぶし）扱いにはなりません。

旧アイコン名解決先経緯
MousePointerSquareSquareMousePointerupstreamでのリネーム（2024-03、GitHub PR#1906）
RailSymbolTrainTrack（近似後継）upstreamでicon.brand理由により非推奨化・v1.0で完全削除。リネームではなく撤去のため公式の後継名はなく、意味的に最も近いアイコンをエイリアス先とした

いずれも新規実装では解決先の現行アイコン名（SquareMousePointer / TrainTrack）を使うことを推奨します。

カスタムクラス

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

未知のアイコン名（開発時の警告）

一覧に無いアイコン名を渡すと、開発モード（NODE_ENV !== 'production'）限定で HelpCircle にフォールバックしつつ console.warn で警告します。本番ビルドでは警告は出ません（フォールバック表示のみ）。

<Icon name="NotARealIconName" />
// console.warn: [Caroa UI] Icon: 未知のアイコン名 "NotARealIconName" が指定されました。HelpCircleにフォールバックします。

エスケープハッチ（component）

Lucide/カスタムアイコン一覧に無いアイコン（サードパーティ製・独自SVG等）を一時的に使いたい場合は、name の代わりに component で任意のアイコンコンポーネントを直接渡せます。name と component は同時に指定できません（型エラーになります）。

import { SomeThirdPartyIcon } from 'some-icon-library'
 
// nameの代わりにcomponentを渡す。size/classNameはIconが自動で伝搬する
<Icon component={SomeThirdPartyIcon} size="lg" />
 
// 独自SVGをラップする場合は size prop を受け取れる形にする
function MyIcon({ size, className }: { size?: number | string; className?: string }) {
  return (
    <svg width={size} height={size} className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <circle cx="12" cy="12" r="10" />
    </svg>
  )
}
 
<Icon component={MyIcon} size="lg" />

恒久的に使うアイコンは component エスケープハッチではなく、Lucideなら src/components/Icon/lucide-icons.ts、ブランド等のカスタムアイコンなら src/components/Icon/custom-icons.ts に正規登録することを推奨します（name で一元管理でき、weight/variant 等の機能もフルに使えます）。

Props対応表

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

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

Props

PropTypeDefaultDescription
nameIconName-アイコン名。Lucide、カスタム、ブランドアイコンから選択（componentと同時指定不可）。componentエスケープハッチを使う場合は不要(nameかcomponentのいずれか一方が必須)
componentReact.ComponentType-nameの代わりに任意のアイコンコンポーネントを直接渡すエスケープハッチ（nameと同時指定不可）。nameかcomponentのいずれか一方が必須
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'アイコンサイズ（12px〜40px）
weight'thin' | 'light' | 'regular' | 'bold''regular'線の太さ（Lucideアイコン専用）
variant'outline' | 'filled''outline'アウトラインまたは塗りつぶし（Lucide、カスタムアイコン）
classNamestring-追加のCSSクラス

よく使うLucideアイコン

Loading...

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

Previous

HoverCard

Next

Input

On this page