tech-logos

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tech Logos

技术品牌标识

Install official, theme-aware brand logos from the Elements registry.

从Elements注册表中安装官方、支持主题适配的品牌标识。

Install Pattern

安装方式

bash

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

Examples:

clerk-logo

github-logo

openai-logo

vercel-logo

bash

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

示例：

clerk-logo

github-logo

openai-logo

vercel-logo

Discover Available Logos

查找可用标识

Option A: Scan registry (if in elements repo)

bash

ls registry/default/blocks/logos/ | sed 's/-logo$//'

Option B: Browse https://tryelements.dev/docs/logos

选项A：扫描注册表（若处于elements仓库中）

bash

ls registry/default/blocks/logos/ | sed 's/-logo$//'

选项B：浏览 https://tryelements.dev/docs/logos

After Install

安装完成后

Logos install to

components/logos/{name}.tsx

tsx

import { ClerkLogo } from "@/components/logos/clerk"

<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />

标识将安装至

components/logos/{name}.tsx

：

tsx

import { ClerkLogo } from "@/components/logos/clerk"

<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />

Common Props

通用属性

```
variant
```
:
```
"icon"
```
|
```
"wordmark"
```
```
mode
```
:
```
"light"
```
|
```
"dark"
```
(auto-detects theme)
```
className
```
: Standard className prop

```
variant
```
:
```
"icon"
```
|
```
"wordmark"
```
```
mode
```
:
```
"light"
```
|
```
"dark"
```
（自动检测主题）
```
className
```
: 标准className属性

Bundles

批量安装包

Need	Command
All logos	`@elements/logos`
AI providers	`@elements/ai-services`
Social platforms	`@elements/social-media`
Package managers	`@elements/package-managers`

需求	命令
全部标识	`@elements/logos`
AI供应商	`@elements/ai-services`
社交平台	`@elements/social-media`
包管理器	`@elements/package-managers`

Quick Patterns

快速安装示例

bash

undefined

bash

undefined

Auth stack

认证栈

npx shadcn@latest add @elements/clerk-logo @elements/better-auth-logo

AI models

AI模型

npx shadcn@latest add @elements/openai-logo @elements/anthropic-logo @elements/claude-logo

Social footer

社交页脚

npx shadcn@latest add @elements/twitter-logo @elements/github-logo @elements/discord-logo

Tech stack

技术栈

npx shadcn@latest add @elements/vercel-logo @elements/supabase-logo @elements/stripe-logo

undefined

npx shadcn@latest add @elements/vercel-logo @elements/supabase-logo @elements/stripe-logo

undefined

Logo Not Found?

找不到所需标识？

If the logo doesn't exist in the registry, help the user request it:

Generate a pre-filled GitHub issue URL:

https://github.com/crafter-station/elements/issues/new?title=[Logo%20Request]%20Add%20{Name}%20logo&body=...&labels=enhancement,logo-request

Example for "Neon" logo:

https://github.com/crafter-station/elements/issues/new?title=%5BLogo%20Request%5D%20Add%20Neon%20logo&body=%23%23%20Logo%20Request%0A%0A**Company%2FService%3A**%20Neon%0A**Website%3A**%20https%3A%2F%2Fneon.tech%0A%0A%23%23%20Why%20this%20logo%3F%0A%3C!--%20Brief%20description%20--%3E%0A%0A---%0A*Auto-generated%20from%20tech-logos%20skill*&labels=enhancement,logo-request

Tell the user:

"The {Name} logo isn't available yet. Click here to request it - the issue is pre-filled!"

如果注册表中没有该标识，可协助用户提交请求：

生成预填充的GitHub议题链接：

https://github.com/crafter-station/elements/issues/new?title=[Logo%20Request]%20Add%20{Name}%20logo&body=...&labels=enhancement,logo-request

“Neon”标识示例：

https://github.com/crafter-station/elements/issues/new?title=%5BLogo%20Request%5D%20Add%20Neon%20logo&body=%23%23%20Logo%20Request%0A%0A**Company%2FService%3A**%20Neon%0A**Website%3A**%20https%3A%2F%2Fneon.tech%0A%0A%23%23%20Why%20this%20logo%3F%0A%3C!--%20Brief%20description%20--%3E%0A%0A---%0A*Auto-generated%20from%20tech-logos%20skill*&labels=enhancement,logo-request

告知用户：

"{Name}标识目前暂不可用。点击此处提交请求 - 议题已预填充完成！"