logo-with-variants

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Logo with Variants Creator

多变体Logo生成工具

Creates logo components with variant support following the established pattern in Elements codebase.

按照Elements代码库中既定的模式，创建支持变体的Logo组件。

When to use this Skill

何时使用此Skill

User provides multiple SVG files for a logo (icon, wordmark, logo variants)
User mentions "variants", "light/dark modes", or references Clerk-style logos
User wants to add a new logo to the collection with multiple variants
User has SVG files in
```
public/test/
```
or provides paths to logo files

用户提供Logo的多个SVG文件（图标、文字标志、完整标志变体）
用户提及“变体”、“明暗模式”，或参考Clerk风格的Logo
用户希望向集合中添加带有多种变体的新Logo
用户在
```
public/test/
```
目录下有SVG文件，或提供了Logo文件的路径

Process

流程

1. Analyze provided SVGs

1. 分析提供的SVG文件

Identify variant types (icon, logo, wordmark)
Detect light/dark mode versions (files ending in
```
-dark.svg
```
or
```
-light.svg
```
)
Extract viewBox, colors, and dimensions from each SVG
Note the brand guidelines if provided

识别变体类型（图标、完整标志、文字标志）
检测明暗模式版本（以
```
-dark.svg
```
或
```
-light.svg
```
结尾的文件）
从每个SVG中提取viewBox、颜色和尺寸
记录提供的品牌指南（如果有）

2. Create component file

2. 创建组件文件

Location:

src/components/ui/logos/{name}.tsx

Props interface:

typescript

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

Structure:

Use conditional rendering based on
```
variant
```
prop
Configure colors for light/dark modes using a COLORS object pattern
Default to
```
variant="wordmark"
```
(primary logo)
Support theme-aware mode prop
Add proper TypeScript types

Reference implementation: Check

src/components/ui/logos/clerk.tsx

for the exact pattern to follow.

位置：

src/components/ui/logos/{name}.tsx

Props接口:

typescript

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

结构:

根据
```
variant
```
属性使用条件渲染
使用COLORS对象模式配置明暗模式的颜色
默认设置
```
variant="wordmark"
```
（主Logo）
支持感知主题的mode属性
添加正确的TypeScript类型

参考实现：查看

src/components/ui/logos/clerk.tsx

以遵循确切的模式。

3. Convert SVG to JSX

3. 将SVG转换为JSX

For each SVG file:

Read the SVG file content
Convert SVG attributes to JSX (e.g.,
```
fill-rule
```
→
```
fillRule
```
,
```
stroke-width
```
→
```
strokeWidth
```
)
Replace hardcoded colors with variables from COLORS object
Preserve viewBox and dimensions
Add title tag for accessibility

对于每个SVG文件：

读取SVG文件内容
将SVG属性转换为JSX格式（例如：
```
fill-rule
```
→
```
fillRule
```
，
```
stroke-width
```
→
```
strokeWidth
```
）
用COLORS对象中的变量替换硬编码的颜色
保留viewBox和尺寸
添加title标签以提升可访问性

4. Create registry structure

4. 创建注册表结构

Location:

registry/default/blocks/logos/{name}-logo/

Files to create:

```
registry-item.json
```
:

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."
}

CRITICAL: The

variants

array MUST list ALL combinations explicitly in

{base}-{mode}

format (e.g., "icon-dark", "logo-light"). This is what makes the variant count badge (e.g., "6") appear correctly in the UI. Do NOT just list base names like ["icon", "logo", "wordmark"].

Copy component to:
```
components/logos/{name}.tsx
```

位置：

registry/default/blocks/logos/{name}-logo/

需要创建的文件:

```
registry-item.json
```
:

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"）。这是UI中正确显示变体计数徽章（如“6”）的关键。不要只列出基础名称，如["icon", "logo", "wordmark"]。

将组件复制到：
```
components/logos/{name}.tsx
```

5. Update registry/index.ts

5. 更新registry/index.ts

CRITICAL STEP: The

registry/index.ts

file is the SOURCE OF TRUTH for the build process. You MUST add/update the logo entry in this file with the EXACT same metadata structure as the

registry-item.json

Location:

registry/index.ts

Find the array of registry items and add your logo entry with the complete

meta

field:

typescript

{
  $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.",
}

If updating an existing logo: Search for the logo name in

registry/index.ts

and replace the entire entry with the new metadata including the

meta

field.

关键步骤：

registry/index.ts

文件是构建过程的唯一可信来源。您必须在此文件中添加/更新Logo条目，确保其元数据结构与

registry-item.json

完全一致。

位置：

registry/index.ts

找到注册表项数组，添加您的Logo条目，包含完整的

meta

字段：

typescript

{
  $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.",
}

如果更新现有Logo：在

registry/index.ts

中搜索Logo名称，并用包含

meta

字段的新元数据替换整个条目。

6. Update logos collection

6. 更新Logo集合

Add to

registry/default/blocks/logos/logos/registry-item.json

Add new logo to the list
Ensure it's in the correct category (tech-giants, ai-services, etc.)

添加到

registry/default/blocks/logos/logos/registry-item.json

：

将新Logo添加到列表中
确保它被归类到正确的类别（科技巨头、AI服务等）

7. Build registry

7. 构建注册表

Run:

bash

bun run build:registry

This generates the public registry files.

运行：

bash

bun run build:registry

此命令将生成公开的注册表文件。

Component Template Pattern

组件模板模式

typescript

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>
  );
}

typescript

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>
    );
  }

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

Expected outcome

预期结果

After completion:

Component is available at
```
@/components/ui/logos/{name}
```
Logo appears in the logos page with variant badge
Context menu shows "View X Variants" option
Variants dialog displays all combinations (variants × modes)
All copy/download functions work for each variant

Can be installed via

npx shadcn@latest add @elements/{name}-logo

完成后：

组件可在
```
@/components/ui/logos/{name}
```
路径下访问
Logo在Logo页面显示，并带有变体徽章
上下文菜单显示“查看X种变体”选项
变体对话框展示所有组合（变体 × 模式）
所有复制/下载功能对每个变体都有效

可通过

npx shadcn@latest add @elements/{name}-logo

命令安装

Brand Guidelines Integration

品牌指南集成

If brand guidelines are provided:

Use exact brand colors specified
Follow naming conventions (e.g., Linear uses "Linear" not "linear")
Respect hierarchy (wordmark primary, logomark for tight layouts, icon for social)
Include usage notes in component comments

如果提供了品牌指南：

使用指定的精确品牌颜色
遵循命名规范（例如：Linear使用“Linear”而非“linear”）
遵循层级结构（文字标志为主要标志，图形标志用于紧凑布局，图标用于社交场景）
在组件注释中包含使用说明

Files to reference

参考文件

Template:
```
src/components/ui/logos/clerk.tsx
```

Registry example:

registry/default/blocks/logos/clerk-logo/

Variants dialog:

src/app/docs/logos/logo-variants-dialog.tsx

Logos collection:

registry/default/blocks/logos/logos/registry-item.json

模板：
```
src/components/ui/logos/clerk.tsx
```

注册表示例：

registry/default/blocks/logos/clerk-logo/

变体对话框：

src/app/docs/logos/logo-variants-dialog.tsx

Logo集合：

registry/default/blocks/logos/logos/registry-item.json

Common pitfalls to avoid

需避免的常见陷阱

Don't forget to copy component to both
```
src/
```
and
```
registry/
```
locations
Ensure
```
hasVariants: true
```
is set in registry metadata
Don't hardcode colors - use COLORS object for theme support
Remember to run
```
build:registry
```
after making changes
Test all variant combinations before committing

不要忘记将组件复制到
```
src/
```
和
```
registry/
```
两个位置
确保注册表元数据中设置了
```
hasVariants: true
```
不要硬编码颜色 - 使用COLORS对象以支持主题切换
记得在修改后运行
```
build:registry
```
命令
提交前测试所有变体组合