Lucide アイコン使用パターン

:LiTarget: 用途

Lucide React アイコンを統一サイズ・色で使うベストプラクティス。

:LiSparkle: 特徴

• 統一サイズ
• 色管理
• アクセシビリティ対応

:LiCode: コード（コピペ用）

import * as LucideIcons from 'lucide-react';

// 動的アイコン取得（名前文字列で指定可能）
type IconName = keyof typeof LucideIcons;

export function Icon({
  name, size = 20, className = '', ariaLabel,
}: {
  name: IconName | string;
  size?: number;
  className?: string;
  ariaLabel?: string;
}) {
  const Cmp = (LucideIcons as any)[name];
  if (!Cmp) return null;
  return (
    <Cmp
      width={size}
      height={size}
      className={className}
      aria-label={ariaLabel ?? name}
      role="img"
    />
  );
}

// 統一サイズの定義
export const IconSize = {
  xs: 12,    // ピル内
  sm: 16,    // インライン
  md: 20,    // ボタン内
  lg: 24,    // カードヘッダー
  xl: 32,    // ヒーロー
} as const;

// 使い方:
// <Icon name="Search" size={IconSize.sm} className="text-zinc-400" />
// <Icon name="CheckCircle2" size={IconSize.md} className="text-emerald-500" />
//
// プロジェクト内で頻出するアイコンは以下に集約:
// const NAV_ICONS = {
//   home: 'Home', tasks: 'ListTodo', settings: 'Settings',
// } as const;

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

• 依存パッケージを忘れず追加