Icon コンポーネント

アイコンシステムのデモとカスタマイズツール

アイコン設定

サイズ、カラー、バリアントをカスタマイズして、プレビューで確認できます

アイコン設定

サイズ

カラー

バリアント

アイコンコンポーネント

TSX

import { Icon } from '@/components/Icon';

export default function Example() {
  return (
    <Icon 
      name="home"
      size="md"
      color="primary"
      variant="outline"
    />
  );
}

プレビュー

サンプルアイコン

home

user

settings

現在の設定

Size: md

Color: primary

Variant: outline

action アイコン

保存、編集、削除などのアクション系アイコン

save

edit

delete

add

remove

copy

download

upload

status アイコン

成功、エラー、警告などの状態系アイコン

success

check

error

warning

info

navigation アイコン

矢印、ホーム、メニューなどのナビゲーション系アイコン

arrow-left

arrow-right

arrow-up

arrow-down

chevron-left

chevron-right

chevron-up

chevron-down

home

external-link

interface アイコン

検索、設定、ユーザーなどのインターフェース系アイコン

filter

settings

user

calendar

clock

tag

eye

eye-slash

content アイコン

画像、ファイル、リンクなどのコンテンツ系アイコン

image

document

folder

file

link

mail

phone

social アイコン

GitHub、X、Figmaなどのソーシャル系アイコン

github

figma

facebook

instagram

theme アイコン

ライト、ダーク、システムなどのテーマ系アイコン

sun

moon

computer

refresh

使用例コード

Iconコンポーネントの基本的な使用方法とサンプル

基本的な使用方法

TSX

import { Icon } from '@/components/Icon';

// 基本的な使用
<Icon name="home" />

// サイズ指定
<Icon name="user" size="lg" />

// カラー指定
<Icon name="search" color="primary" />

// バリアント指定
<Icon name="settings" variant="solid" />

// 組み合わせ
<Icon 
  name="download" 
  size="xl" 
  color="success" 
  variant="outline" 
/>

サンプル

基本的な使用

サイズ指定 (lg)

カラー指定 (primary)

バリアント指定 (solid)

組み合わせ (xl + success + outline)