theSVG

theSVG是什么？

theSVG是面向开发者与设计师的专业开源品牌SVG图标库，收集高质量的品牌Logo、云服务架构图标资源，提供工程化接入以及多种使用方案，资源开源可商用。无需注册，直接搜索、下载，功能丰富界面简单，是设计师、开发者的高质体需求式的矢量素材库。

theSVG主要功能

• 海量专业图标资源：内置5600+全球品牌的Logo、AWS/Azure/GCP三大云厂商的架构图标，8400+变体（彩色、单色、黑白色、文字标等），分55+技术、行业分类。
• 多方式一键接入：在线搜索复制SVG代码或者下载文件，内置npm包（Tree shaking可用）、直连CDN、CLI、Restful API接口，适用于各种开发流程。
• 全前端框架兼容：内置 React、Vue、Svelte 等组件（针对性组件），类型完备的 TypeScript 支持，配合现代前端工程完全融合。
• 智能图标变体：单图标有原色、单色、亮色、暗色、文字标等 7 种样式一键变体即可适配明暗主题，不同需求。
• AI工具集成：内置MCP服务器，可对接Claude、Cursor等AI插件，直呼图标，辅助你的AI工作。

适用场景

• 前端项目开发：官网、产品页导入品牌 / 技术栈图标，省去所需美术资源，优化项目打样体积。
• 技术文档撰写：可规范有序插入云服务商、工具、软件图标等。
• 架构图设计：用标准的云厂商图标绘制系统架构图，可直接用在 PPT、在线文档、方案设计中等场景下。
• 响应式界面：矢量SVG的无损缩放，清晰显示移动端、PC 端、大屏等不同终端。
• 低代码 / AI开发：图标是数据源，依托API/AI命令快速添加于应用和生成内容。 

theSVG怎么使用？

1. 打开浏览器访问theSVG官网：https://thesvg.org，不用登录注册即可使用全部基础功能。
2. 在顶部搜索栏搜索想要的图标关键词，比如 github、aws、vue 这个都是搜出来的品牌的、云服务的图标名称。
3. 图搜索完后直接点击搜到图标，确定你想要的样式即可，大多数就是 default（原色）、mono（单色）、light（白色）、dark（黑色）等等这些。
4. 选择好样式后点击复制 SVG 代码到你的 HTML 文件中、Markdown 文件中或者直接设计软件中都可以使用。
5. 当然如果你不想复制代码，可以直接复制 webcdn 的链接，HTML直接加标签引用，在 HTML示例：。
6. 前端项目用起来，可以直接通过NPM install依赖包，npm install thesvg 或更轻量的 npm install @thesvg/icons。
7. React项目需要安装一个专门的组件包 npm install @thesvg/react，在代码中导入并使用，如 import { Github } from ‘@thesvg/react’，再在组件中写入 。
8. Vue3项目安装 npm install @thesvg/vue 在组件中引用图标组件，直接写在模版中。
9. 命令行中 npx @thesvg/cli search”关键词”搜索图标，npx @thesvg/cli add 图标名 –variant 样式下载文件里的图标到本地。
10. 程序自动调用API，可以获取图标或者SVG文件，形式为RESTful API，如curl”https://thesvg.org/api/icons/github”获得icon的一些信息，curl”https://img.pidoutv.com/wp-content/uploads/2026/04/20260404181438-2908a.svg+xml”直接下载icon的一个SVG文件。