thesvg

Name: thesvg
Author: glincker

github.com/glincker设计与 UI2.9k305 次安装今天更新

代码仓库

关于 thesvg

thesvg 是面向 Agent 的品牌与云服务 SVG 图标检索技能，适用于需要在文档、界面或架构图中添加指定标志的场景。它通过固定 URL 和图标清单查找图标及其变体，并区分自动化获取与面向用户的嵌入方式。

主要功能

01检索品牌与云服务图标
02按 slug 和变体构造图标 URL
03查询图标注册清单
04按场景提供图标嵌入方式
05提供品牌缺失提交入口

适用场景

01为 README 添加品牌图标
02为云架构图查找服务图标
03在生成文档时批量获取 SVG
04根据背景选择图标变体

MCP 相关

README 提及可选的 `@thesvg/mcp-server` 集成，供 Claude Desktop、Cursor 和 Windsurf 使用；本技能的主要方法是通过 URL 和注册清单获取图标。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/glincker/thesvg --skill thesvg

安装后在 Claude Code 中输入/thesvg确认已加载。

详细介绍

theSVG Agent 技能

只要用户请求品牌 Logo、服务图标、框架标志或云服务图标，就使用此技能。theSVG 托管了 7,600 多个品牌 SVG 和云架构图标，并采用统一的 URL 模式，因此无需抓取网页或猜测文件路径。

何时使用此技能

以下请求应触发此技能：

“给我 GitHub 的 SVG Logo”
“插入一个 Stripe 图标”
“我需要 AWS Lambda 和 S3 架构图标”
“为我们的集成页面添加品牌图标（Slack、Notion、Linear、Figma）”
“找一个可以放进 README 的 Tailwind Logo”
“OpenAI 标志的深色版本 URL 是什么？”

对于通用 UI 图标（尖括号、菜单、箭头），请跳过此技能，改用 Lucide、Heroicons 或类似工具。theSVG 专用于具名品牌和服务。

URL 模式

每个图标都有可预测的 URL。无需身份验证，也没有速率限制。

有两个等效的端点。对于 Agent 和自动化场景，优先使用 jsDelivr。 thesvg 官方 Figma 插件也基于相同原因选择了它：Agent 会发出突发式自动请求，而 jsDelivr 的全球 CDN 可以吸收这些负载，不影响 thesvg.org 的用户流量。

主要端点（推荐用于 Agent）

https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/{slug}/{variant}.svg

备用端点（适用于面向最终用户的 UI）

https://thesvg.org/icons/{slug}/{variant}.svg

两个 URL 提供的内容完全相同。将 URL 嵌入面向用户的页面（README、HTML、博客文章）时，可以推荐 thesvg.org 路由，因为每位访客产生的流量很少。当代码本身需要获取 SVG 时（例如 Agent 将图标插入生成的文档，或批量查找图标），应选择 jsDelivr 路由。

路径组成部分：

{slug} 是小写、以连字符分隔的品牌标识符（github、aws-lambda、google-cloud、openai、tailwindcss）。
{variant} 是以下之一：default、mono、light、dark、wordmark、wordmarkLight、wordmarkDark、color。default 始终存在。

示例

https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/mono.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/stripe/default.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/aws-lambda/default.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/dark.svg

查找正确的 slug

如果不确定 slug，可以获取一次注册表并在客户端搜索。主要端点和备用端点的划分与上述图标 URL 相同：

GET https://cdn.jsdelivr.net/gh/glincker/thesvg@main/src/data/icons.json   (recommended for agents)
GET https://thesvg.org/api/registry.json                                   (alternate)

返回图标清单，每个图标都包含 { slug, title, aliases, categories, hex, url, variants }。将用户的查询与 title 和 aliases 匹配（不区分大小写的子字符串匹配或模糊匹配）。

较小的类别清单：

GET https://thesvg.org/api/categories.json

在 Agent 会话期间缓存注册表。它的更新周期按天计算，而非按分钟计算。

如何提供图标

根据用户的使用场景，选择最合适的形式：

用户场景	返回内容
Markdown / README / 文档	`![GitHub](https://thesvg.org/icons/github/default.svg)`
HTML / Web 项目	`<img src="https://thesvg.org/icons/github/default.svg" width="32" height="32" alt="GitHub" />`
React 组件（其项目使用 `@thesvg/react`）	`import { Github } from "@thesvg/react"; <Github width={24} />`
Agent 代码获取原始 SVG	获取 `https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg` 并粘贴正文
CLI / Shell 用户	`npx @thesvg/cli add github`

浅色与深色背景

用户提到深色背景（或请求“白色版本”）时，如果有 light 或 mono 版本，优先使用其中之一。用户提到浅色背景时，优先使用 dark 或 mono。如果所需变体不存在，始终回退到 default。

云架构图

对于 AWS、Azure 和 GCP 服务图标，使用相同的 URL 模式。常见 slug：

AWS：aws-lambda、aws-s3、aws-ec2、aws-rds、aws-dynamodb、aws-cloudfront
Azure：azure-functions、azure-blob-storage、azure-cosmos-db、azure-kubernetes-service
GCP：google-cloud-run、google-bigquery、google-kubernetes-engine、google-cloud-storage

如果用户正在构建架构图，请按服务层级（计算 / 存储 / 网络）分组，以列表形式返回 URL，方便他们将其放入 Excalidraw、Mermaid 或 Figma 画板中。

许可提醒

theSVG 代码库采用 MIT 许可。各个品牌标识仍是其各自所有者的商标。商业用途请查看各品牌的使用指南。AWS Architecture Icons 采用 CC BY-ND 2.0 许可（禁止演绎，分发时不得修改）。

如果用户要求为品牌标识重新着色、扭曲或将其组合成新徽标，请在继续操作前提示商标风险。

提交缺失的品牌

如果用户需要的品牌不在注册表中，请引导他们前往：

https://thesvg.org/submit

维护者接受来自域名注册时间至少为 30 天的公司的品牌提交。

参考资料

支持 Markdown

登录后评论