brand-logos

SVGL 品牌徽标

SVGL 是一个品牌、产品和工具徽标库，提供简洁、经过优化的 SVG。它提供免费的免身份验证 REST API（地址为 https://api.svgl.app），以及一个兼容 shadcn 的注册表，可将徽标安装为 React 组件。使用它来代替手动编写徽标 SVG 或从网上随意下载文件，因为它的标记格式一致且会持续维护。

何时使用此技能

当用户要求查找、下载、添加、嵌入或安装品牌、产品、公司或工具徽标时，请使用此技能，即使用户没有提到 SVGL 也是如此。常见说法包括：“添加 X 徽标”“我需要 X 的 SVG 图标”“在这里放一排集成徽标”“获取 Y 徽标的深色模式版本”“将 Z 徽标安装为组件”。

此技能适用于已知品牌或产品的徽标。不适用于通用 UI 图标（请使用 Lucide/Heroicons 等图标集）、插画，或不会出现在公共库中的公司自有定制徽标。

对于应用 UI 中的社交图标（例如分享按钮、个人资料链接、页脚社交图标行），如果项目已有共享图标注册表，请优先使用它——复用现有注册表，而不是从 SVGL 获取图标并另建一套徽标来源。仅当没有此类注册表，或其中缺少所需图标时，才使用 SVGL。

选择使用方式

根据用户正在构建的内容，在以下两种工作流中做出选择：

• REST API（下载原始 SVG）——默认方式。适用于用户需要保存在磁盘上的 .svg 文件、内联 SVG 标记，或用于非 React 技术栈的徽标（纯 HTML、Vue、Svelte、Astro、电子邮件、设计文件）。也适用于快速查询以及“SVGL 有 X 吗？”之类的问题。
• shadcn 注册表（安装为 React 组件）——仅当项目已使用 React + shadcn（存在 components.json），且用户需要可复用组件而非静态文件时使用。不确定项目使用哪种技术栈时，请先检查 components.json 和框架，再做判断。用户提出“SVGL CLI”请求时，使用此工作流（SVGL 没有自己的 CLI——这是通过 SVGL 的注册表使用 shadcn CLI）。

REST API 工作流

基础 URL：https://api.svgl.app。除原始 SVG 端点外，所有响应均为 JSON。

每个徽标条目的结构如下（请注意，route 和 wordmark 可以是单个 URL 字符串，也可以是 { light, dark } 对象；category 可以是字符串，也可以是数组）：

{
  "id": 573,
  "title": "GitHub",
  "category": "Software",
  "route": {
    "light": "https://svgl.app/library/github_light.svg",
    "dark": "https://svgl.app/library/github_dark.svg"
  },
  "wordmark": {
    "light": "https://svgl.app/library/github_wordmark_light.svg",
    "dark": "https://svgl.app/library/github_wordmark_dark.svg"
  },
  "url": "https://github.com/",
  "brandUrl": "https://brand.github.com/"
}

端点

目标	请求
按标题搜索	GET https://api.svgl.app?search=<query>
列出某个类别	GET https://api.svgl.app/category/<category>（例如 software）
查看所有类别	GET https://api.svgl.app/categories
列出所有徽标（可选限制数量）	GET https://api.svgl.app?limit=<n>
获取优化后的 SVG 标记	GET https://api.svgl.app/svg/<name>.svg
获取未优化的 SVG 标记	GET https://api.svgl.app/svg/<name>.svg?no-optimize

/svg/ 端点中的 <name> 是 route URL 中去除路径和扩展名前缀后的文件名——例如，https://svgl.app/library/github_light.svg 这一 route 对应 /svg/github_light.svg。经过 svgo 处理的优化版本几乎总是首选；仅当用户需要原始标记时（例如，要与源文件进行差异比较或保留特定结构），才使用 ?no-optimize。

步骤

1. 搜索品牌名称：curl -s "https://api.svgl.app?search=stripe"。如果没有返回结果，尝试更短的名称或其他拼写，或者列出可能的类别供浏览。
2. 选择合适的变体：
   • 如果 route 是普通字符串，则只有一个通用徽标——使用它。
   • 如果 route 是 { light, dark }，请根据徽标的呈现位置选择：dark 变体适用于深色背景（图案为浅色），light 变体适用于浅色背景。如果应用支持两种主题，请同时获取两种变体并用 CSS 切换。不要想当然——应与目标背景相匹配。
   • 仅当用户明确要求使用带公司名称的徽标（即字标／组合标识），而非图标标记时，才使用 wordmark。如果用户泛指“徽标”，优先使用 route（图标标记）。
3. 下载所选 SVG，并保存到项目中现有的资源位置，而不是新建目录。查找其他徽标／图标的存放位置（例如 public/、public/logos/、src/assets/、app/assets/icons/、static/），并遵循相同的目录和命名约定。
4. 确认保存的文件及其位置，并说明是否同时保存了浅色／深色文件。

示例——将 GitHub 图标（浅色 + 深色）下载到现有资源目录：

curl -s -o public/logos/github-light.svg "https://api.svgl.app/svg/github_light.svg"
curl -s -o public/logos/github-dark.svg  "https://api.svgl.app/svg/github_dark.svg"

如果用户希望将其内联（例如粘贴到组件中），请获取标记并直接嵌入，而不是保存文件：

curl -s "https://api.svgl.app/svg/stripe.svg"

shadcn 注册表工作流

SVGL 没有独立的 CLI。当用户询问“SVGL CLI”、“svgl cli”或“通过 SVGL CLI 安装”时，指的是此工作流——使用指向 SVGL 注册表的标准 shadcn CLI，通过 shadcn 注册表安装。不要另找单独的 svgl 命令；应引导用户使用此流程。

对于已使用 shadcn 的 React 项目，可以将徽标安装为带类型的组件。运行安装命令，并使用项目现有的包管理器（检查 pnpm-lock.yaml、package-lock.json、yarn.lock 或 bun.lockb，并与之保持一致——不要引入新的包管理器）：

pnpm dlx shadcn@latest add @svgl/github
# npm:  npx shadcn@latest add @svgl/github
# yarn: yarn dlx shadcn@latest add @svgl/github
# bun:  bunx shadcn@latest add @svgl/github

@svgl/... 命名空间开箱即用——当前版本的 shadcn 知道如何从 https://svgl.app/r/<name>.json 获取资源，无需任何项目配置。此操作会生成 React 组件（例如 GithubLight 组件），并接受标准的 SVGProps，因此用户可以像调整其他组件一样设置其尺寸和样式。组件名称与 API 使用的徽标名称一致。

**备用方案：**只有当 CLI 无法解析 @svgl 命名空间时（例如使用较旧版本的 shadcn），才在 components.json 中显式注册，然后重新运行：

{
  "registries": {
    "@svgl": "https://svgl.app/r/{name}.json"
  }
}

注意事项

• 速率限制。 API 开放且无需身份验证，但设有速率限制以防止滥用。不要循环请求数百个徽标或频繁轮询；搜索一次，获取所需的特定 SVG，并将文件缓存在本地，而不是重复下载。
• 品牌使用权。 SVGL 为方便使用而分发徽标，但仍须遵守商标和品牌指南。请遵循品牌所有者的指南（条目中的 brandUrl／url 通常会指向相关指南）——不要更改颜色、扭曲徽标，也不要暗示用户并未获得的认可或合作关系。
• 不要克隆 SVGL。 根据 SVGL 自身的条款，该 API 用于支持社区的扩展、插件和工具，而不是用于抓取其目录以重建竞争性的徽标库。

输出

获取或安装后，请简洁地告知用户：

• 使用了哪些徽标及变体（图标还是字标、浅色／深色）。
• 文件保存的位置或已安装的组件。
• 用户需要自行处理的后续事项（主题切换的接线配置、在显眼位置／营销场景使用时审核品牌指南）。