アイコン

概要

Caroa UIはLucide Iconsをベースにしたアイコンシステムを提供しています。Iconコンポーネントを通じて、1,000以上のアイコンを利用できます。

基本的な使い方

import { Icon } from '@caroainc/ui-components/client'
 
<Icon name="Home" />
<Icon name="Settings" />
<Icon name="User" />

サイズ

size propでアイコンのサイズを変更できます。

サイズ	ピクセル	用途
`xs`	12px	非常に小さいUI
`sm`	16px	インライン、ボタン内
`md`	20px	標準（デフォルト）
`lg`	24px	目立たせたい場合
`xl`	32px	大きいアイコン
`2xl`	40px	ヒーローセクション

2xl

<Icon name="Star" size="xs" />
<Icon name="Star" size="sm" />
<Icon name="Star" size="md" />
<Icon name="Star" size="lg" />
<Icon name="Star" size="xl" />
<Icon name="Star" size="2xl" />

ウェイト（線の太さ）

weight propで線の太さを変更できます。

thin

light

regular

bold

<Icon name="Heart" weight="thin" />
<Icon name="Heart" weight="light" />
<Icon name="Heart" weight="regular" />
<Icon name="Heart" weight="bold" />

バリアント

variant propでアウトラインまたは塗りつぶしを選択できます。

outline

filled

<Icon name="Heart" variant="outline" />
<Icon name="Heart" variant="filled" />

ボタンと組み合わせ

<Button>
  <Icon name="Plus" size="sm" />
  <span>追加</span>
</Button>
 
<Button variant="ghost" shape="square">
  <Icon name="Settings" size="sm" />
</Button>

カラー

アイコンは currentColor を継承するため、親要素の text-* クラスで色を変更できます。

<Icon name="Circle" className="text-blue-base" />
<Icon name="Circle" className="text-green-base" />
<Icon name="Circle" className="text-orange-base" />

アイコン一覧

クリックするとコードがコピーされます。

1163 件のアイコン

Props

プロパティ	型	デフォルト	説明
`name`	`string`	必須	アイコン名
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	サイズ
`weight`	`'thin' \| 'light' \| 'regular' \| 'bold'`	`'regular'`	線の太さ
`variant`	`'outline' \| 'filled'`	`'outline'`	アウトラインまたは塗りつぶし
`className`	`string`	-	追加のCSSクラス

アイコン

On this page