Caroa UI

Icon

Lucide Iconsをラップしたアイコンコンポーネント。

インポート

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

基本的な使い方

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

サイズ

Loading...
<Icon name="Star" size="xs" />
<Icon name="Star" size="sm" />
<Icon name="Star" size="default" />
<Icon name="Star" size="lg" />
<Icon name="Star" size="xl" />

カスタムクラス

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

よく使うアイコン

Loading...

Server Components向け

Server Componentsでアイコンを使う場合はServerIconを使用：

import { ServerIcon } from '@caroainc/ui-components/server'
 
// アイコン名を文字列で指定（動的インポート）
<ServerIcon name="Check" size="sm" />

Props

PropTypeDefaultDescription
name*string-Lucide Iconsのアイコン名（例: "Search", "User", "Settings"）
size'xs' | 'sm' | 'default' | 'lg' | 'xl''default'アイコンのサイズ
classNamestring-追加のCSSクラス

Previous

ColoredBadge

Next

Avatar

On this page