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 issue链接：

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} 标识暂未上线。点击此处提交申请 - issue已预填写好内容！"