theSVG MCP服务器配置指南：让Claude和Cursor一键获取品牌Logo图标

theSVG MCP服务器配置指南让Claude和Cursor一键获取品牌Logo图标【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg做前端、写文档时你是不是经常为找不到品牌Logo而烦恼手动去图标站搜索、下载、改名效率低还容易找错。theSVG MCP服务器正是为解决这个问题而生——它是 theSVG 图标库7,400 品牌SVG图标提供的 Model Context Protocol 服务配置后Claude Desktop、Cursor 等 AI 编辑器就能直接搜索并抓取品牌Logo无需注册、无需 API Key。本文是一份面向新手的完整配置教程。theSVG MCP服务器是什么为什么值得装packages/mcp/ 是 theSVG 项目下的 MCPModel Context Protocol服务端子包包名为thesvg/mcp-server。它的工作方式可以简单理解为AI 编辑器 → 调用 MCP 服务器 → 查询本地图标索引 → 返回SVG代码或CDN链接相比传统方式的三大优势 对比项传统找图标theSVG MCP服务器搜索打开浏览器、手动输入关键词直接对AI说“找一下GitHub的图标”获取下载、重命名、导入项目AI 自动返回 SVG 代码或URL门槛需要会操作多个网站零 API Key离线可搜索它有两个巧妙的设计详见 packages/mcp/README.md构建时打包图标索引约 2.8MB启动即用、搜索离线可用秒开无网络依赖SVG 内容按需从 jsDelivr CDN 获取只有真正取图时才联网核心源码只有一个文件packages/mcp/src/index.ts使用 Fuse.js 实现模糊搜索支持按品牌名、slug、别名匹配。五个内置工具AI 能帮你做什么服务器暴露了 5 个工具定义见 packages/mcp/src/index.ts配置好之后你可以直接用自然语言触发它们工具作用你可以对AI说的话search_icons按品牌名模糊搜索图标“帮我找 Stripe 的图标”get_icon获取指定图标的原始SVG代码“把 OpenAI 的SVG代码给我”list_variants列出某个图标的所有变体“openai 有哪些变体”get_icon_url直接返回 CDN 图片链接“给我一个能嵌进HTML的链接”list_categories列出所有图标分类及数量“图标库都分了哪些类”每个图标通常支持default、mono单色、light、dark、wordmark等多种变体深色背景、浅色背景、纯文字标识都能满足非常实用。一键安装步骤Claude Desktop 配置教程前提条件很简单Node.js ≥ 18见 packages/mcp/package.json 的 engines 字段其余什么都不用装。第 1 步找到 Claude 的配置文件macOS~/Library/Application Support/Claude/claude_desktop_config.jsonWindows%APPDATA%\Claude\claude_desktop_config.json第 2 步写入以下配置无需安装npx 直接运行{ mcpServers: { thesvg: { command: npx, args: [-y, thesvg/mcp-server] } } }第 3 步重启 Claude Desktop输入框旁出现工具图标即表示配置成功。 如果你更习惯全局安装可以先执行npm install -g thesvg/mcp-server然后把配置简化为command: thesvg-mcp。Cursor 最快配置方法项目级与全局两种玩法Cursor 的配置路径在 packages/mcp/README.md 中有明确说明项目级在当前项目的.cursor/mcp.json中添加配置——只在该项目生效适合团队协作提交到仓库即可共享全局级在~/.cursor/mcp.json中添加——所有项目可用两者配置内容完全相同{ mcpServers: { thesvg: { command: npx, args: [-y, thesvg/mcp-server] } } }配置完成后在 Cursor 的 Agent 模式里直接提问“给这个项目的技术栈部分加上对应的品牌图标”AI 就会自动调用search_icons找到 slug再调用get_icon或get_icon_url拿到SVG。实际使用演示从一句话到成品图标配置完成后整个工作流是这样的无需任何手动操作你说“帮我找一个 Kubernetes 的品牌图标要深色变体”AI 调用search_icons返回- Kubernetes (slug: kubernetes) | variants: default, mono...AI 调用list_variants确认存在dark变体AI 调用get_icon拿到完整SVG代码或调用get_icon_url拿到img标签可直接粘贴比如做技术文档时get_icon_url返回的链接可以直接写成img srchttps://cdn.jsdelivr.net/gh/glincker/thesvgv0.6.0/public/icons/kubernetes/dark.svg altKubernetes width32 height32 /写 Markdown 则直接Kubernetes即可——文档里的图标从此告别手动下载。常见问题与最佳实践Q搜索不到图标怎么办search_icons基于模糊匹配试试品牌的 slug 写法如amazon-web-services而不是 “aws”也可以用list_categories先看看分类再缩小范围。Q为什么有的工具要联网、有的不用搜索、列变体、查链接都查的是本地打包的icons.json索引完全离线只有get_icon需要从 CDN 拉取真实SVG文件所以仅这一个工具需要网络。Q图标数据会过期吗索引在构建时固定数据源见 src/data/ 目录的图标注册表升级到新版 npm 包即可获得最新图标。版本变更历史可参考 packages/mcp/CHANGELOG.md。Q对 Claude Code 命令行用户呢一条命令搞定claude mcp add thesvg -- npx -y thesvg/mcp-server原理相同。最佳实践清单✅项目级配置写进.cursor/mcp.json提交到仓库团队成员开箱即用暗色主题文档优先要dark/mono变体浅色背景用light只需要展示图片时用get_icon_url省流量需要内联SVG时才用get_icon想要更多图标可以到 extensions/ 目录下看看 theSVG 提供的浏览器扩展、Figma 插件等周边工具总结theSVG MCP服务器把“找品牌Logo”这件琐事彻底交给了 AI免费、免 API Key、离线可搜索、7,400 品牌全覆盖。Claude Desktop 或 Cursor 里粘贴一段 JSON一分钟即可完成配置——之后无论是写 README、做演示页面还是生成文档一句话就能让 AI 精准取到任意品牌的SVG图标。现在就去试试吧【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考