logo-with-variants

バリアント対応ロゴ作成ツール

Elements コードベースで確立されたパターンに従って、バリアントに対応したロゴコンポーネントを作成します。

このスキルを使用するタイミング

• ユーザーがロゴ用の複数の SVG ファイル（アイコン、ワードマーク、ロゴのバリアント）を提供した場合
• ユーザーが「バリアント」「ライト／ダークモード」に言及した場合、または Clerk スタイルのロゴを参考にしている場合
• ユーザーが複数のバリアントを持つ新しいロゴをコレクションに追加したい場合
• ユーザーが public/test/ に SVG ファイルを用意している場合、またはロゴファイルへのパスを提供した場合

手順

1. 提供された SVG を分析する

• バリアントの種類（アイコン、ロゴ、ワードマーク）を特定します
• ライト／ダークモードのバージョンを検出します（ファイル名が -dark.svg または -light.svg で終わるもの）
• 各 SVG から viewBox、色、寸法を抽出します
• ブランドガイドラインが提供されている場合は、その内容を確認します

2. コンポーネントファイルを作成する

場所: src/components/ui/logos/{name}.tsx

Props インターフェース:

{
  className?: string;
  variant?: "icon" | "logo" | "wordmark";
  mode?: "dark" | "light";
}

構成:

• variant prop に基づく条件付きレンダリングを使用します
• COLORS オブジェクトのパターンを使用してライト／ダークモードの色を設定します
• デフォルトを variant="wordmark"（主要なロゴ）にします
• テーマ対応の mode prop をサポートします
• 適切な TypeScript 型を追加します

実装例: 従うべき正確なパターンについては、src/components/ui/logos/clerk.tsx を確認してください。

3. SVG を JSX に変換する

各 SVG ファイルについて：

• SVG ファイルの内容を読み込みます
• SVG 属性を JSX に変換します（例：fill-rule → fillRule、stroke-width → strokeWidth）
• ハードコードされた色を COLORS オブジェクトの変数に置き換えます
• viewBox と寸法を保持します
• アクセシビリティのために title タグを追加します

4. レジストリ構造を作成する

場所: registry/default/blocks/logos/{name}-logo/

作成するファイル:

1. registry-item.json:

{
  "name": "{name}-logo",
  "type": "registry:block",
  "title": "{DisplayName} Logo",
  "description": "{Brand description}",
  "categories": ["logos"],
  "meta": {
    "hasVariants": true,
    "variants": [
      "icon-dark",
      "icon-light",
      "logo-dark",
      "logo-light",
      "wordmark-dark",
      "wordmark-light"
    ],
    "variantTypes": {
      "base": ["icon", "logo", "wordmark"],
      "modes": ["dark", "light"]
    }
  },
  "files": [
    {
      "path": "components/logos/{name}.tsx",
      "type": "registry:component"
    }
  ],
  "docs": "{Brand} logo with 3 base variants (icon, logo, wordmark) and 2 modes (dark, light) = 6 total combinations. Theme-aware: automatically adapts colors when you switch themes."
}

重要: variants 配列には、すべての組み合わせを {base}-{mode} 形式（例：「icon-dark」、「logo-light」）で明示的に列挙する必要があります。これにより、バリアント数のバッジ（例：「6」）が UI に正しく表示されます。["icon", "logo", "wordmark"] のようにベース名だけを列挙しないでください。

2. コンポーネントを次の場所にコピーします：components/logos/{name}.tsx

5. registry/index.ts を更新する

重要な手順: registry/index.ts ファイルは、ビルドプロセスにおける唯一の信頼できる情報源です。このファイルに、registry-item.json とまったく同じメタデータ構造でロゴのエントリーを追加または更新する必要があります。

場所: registry/index.ts

レジストリアイテムの配列を見つけ、完全な meta フィールドを含むロゴのエントリーを追加します：

{
  $schema: "https://ui.shadcn.com/schema/registry-item.json",
  name: "{name}-logo",
  type: "registry:block",
  title: "{DisplayName} Logo",
  description: "{Brand description}",
  registryDependencies: [],
  dependencies: [],
  categories: ["logos"],
  meta: {
    hasVariants: true,
    variants: [
      "icon-dark",
      "icon-light",
      "logo-dark",
      "logo-light",
      "wordmark-dark",
      "wordmark-light",
    ],
    variantTypes: {
      base: ["icon", "logo", "wordmark"],
      modes: ["dark", "light"],
    },
  },
  files: [
    {
      path: "registry/default/blocks/logos/{name}-logo/components/logos/{name}.tsx",
      type: "registry:component",
    },
  ],
  docs: "{Brand} logo with 3 base variants (icon, logo, wordmark) and 2 modes (dark, light) = 6 total combinations. Theme-aware: automatically adapts colors when you switch themes.",
}

既存のロゴを更新する場合: registry/index.ts でロゴ名を検索し、meta フィールドを含む新しいメタデータでエントリー全体を置き換えます。

6. ロゴコレクションを更新する

registry/default/blocks/logos/logos/registry-item.json に追加します：

• 新しいロゴをリストに追加します
• 正しいカテゴリ（tech-giants、ai-services など）に分類されていることを確認します

7. レジストリをビルドする

次を実行します：

bun run build:registry

これにより、公開用のレジストリファイルが生成されます。

コンポーネントのテンプレートパターン

interface LogoProps {
  className?: string;
  variant?: "icon" | "logo" | "wordmark";
  mode?: "dark" | "light";
}

const COLORS = {
  dark: "#HEX_VALUE",
  light: "#HEX_VALUE",
};

export function BrandLogo({
  className,
  variant = "wordmark",
  mode = "dark",
}: LogoProps) {
  const color = COLORS[mode];

  if (variant === "icon") {
    return (
      <svg className={className} viewBox="...">
        {/* Icon SVG content */}
      </svg>
    );
  }

  if (variant === "logo") {
    return (
      <svg className={className} viewBox="...">
        {/* Logo SVG content */}
      </svg>
    );
  }

  // Default: wordmark
  return (
    <svg className={className} viewBox="...">
      {/* Wordmark SVG content */}
    </svg>
  );
}

完了後の状態

完了すると：

1. コンポーネントを @/components/ui/logos/{name} から使用できます
2. ロゴページにバリアントバッジ付きでロゴが表示されます
3. コンテキストメニューに「X 個のバリアントを表示」オプションが表示されます
4. バリアントダイアログにすべての組み合わせ（バリアント × モード）が表示されます
5. 各バリアントでコピー／ダウンロード機能がすべて動作します
6. npx shadcn@latest add @elements/{name}-logo でインストールできます

ブランドガイドラインとの統合

ブランドガイドラインが提供されている場合：

• 指定されたブランドカラーを正確に使用します
• 命名規則に従います（例：Linear では「linear」ではなく「Linear」を使用します）
• 階層を尊重します（ワードマークを主要なロゴ、ロゴマークを限られたスペースでのレイアウト用、アイコンをソーシャル用にします）
• コンポーネントのコメントに使用上の注意を含めます

参照するファイル

• テンプレート: src/components/ui/logos/clerk.tsx
• レジストリの例: registry/default/blocks/logos/clerk-logo/
• バリアントダイアログ: src/app/docs/logos/logo-variants-dialog.tsx
• ロゴコレクション: registry/default/blocks/logos/logos/registry-item.json

避けるべきよくある落とし穴

• コンポーネントを src/ と registry/ の両方にコピーするのを忘れないでください
• レジストリのメタデータで hasVariants: true が設定されていることを確認してください
• 色をハードコードせず、テーマに対応するために COLORS オブジェクトを使用してください
• 変更後に build:registry を実行するのを忘れないでください
• コミットする前に、すべてのバリアントの組み合わせをテストしてください