theSVG

theSVG 是一个专注于品牌徽标和云架构图标的现代化 SVG 图标库。不同于传统的 UI 图标库（如 Heroicons 或 Feather），theSVG 解决了开发者在寻找高质量、版本化的品牌 Logo 以及 AWS/Azure/GCP 官方架构图标时的痛点。

它提供超过 5,600+ 个图标，支持 npm 包、CDN、CLI、API 以及专为 AI 编码助手设计的 MCP 服务器，是构建技术文档、云架构图和现代 Web 应用的理想选择。

核心亮点

1. 专注品牌与云生态

• 品牌图标：收录 4,019+ 个品牌徽标，覆盖科技、社交、金融等 55+ 个类别。
• 云架构图标：
  • AWS: 739 个官方服务、资源及分组图标（2026 Q1 更新）。
  • Azure: 626 个 Microsoft Azure 服务图标。
  • GCP: 214 个 Google Cloud Platform 图标。
• 多变体支持：每个图标提供彩色、单色、浅色/深色模式及文字标等多种变体，总计 8,400+ 个 SVG 文件。

2. AI 就绪 (MCP Server)

• 原生集成：提供专用的 MCP (Model Context Protocol) 服务器，完美适配 Claude Desktop, Cursor, Windsurf 等 AI 编码工具。
• 智能调用：AI Agent 可以直接搜索并获取准确的 SVG 代码，无需人工查找复制，大幅提升开发效率。

3. 开发者友好

• Tree-shakable：支持按需导入，只打包你使用的图标，保持项目轻量。
• TypeScript 优先：提供完整的类型定义，支持 ESM 和 CJS 模块格式。
• 框架无关：适用于 React, Vue, Svelte, Angular 或纯 HTML/JS 项目。
• 多种交付方式：npm 包、CDN链接、CLI 工具、REST API。

快速开始

1. 安装

npm install thesvg
# 或者使用作用域包以获得更好的摇树优化体验
npm install @thesvg/icons

2. 基本用法

import github from "thesvg/github";

// 获取原始 SVG 字符串
console.log(github.svg); 

// 获取品牌颜色 Hex 值
console.log(github.hex); // "181717"

// 获取标题
console.log(github.title); // "GitHub"

// 访问不同变体
console.log(github.variants.mono); // 单色版本 SVG

3. 在 React 中使用

import React from 'react';
import awsLambda from '@thesvg/icons/aws/lambda';

const IconComponent = () => {
  return (
    <div 
      dangerouslySetInnerHTML={{ __html: awsLambda.svg }} 
      style={{ width: '24px', height: '24px' }}
    />
  );
};

4. CLI 使用

npx thesvg search "aws lambda"
npx thesvg copy "github"

图标集合概览

注意：云架构图标均来源于官方资源包，遵循相应的许可协议（如 AWS 图标遵循 CC BY-ND 2.0）。

AI 集成示例 (MCP)

在支持 MCP 的编辑器（如 Cursor 或 Claude Desktop）中配置 theSVG Server 后，你可以直接通过自然语言请求图标：

User: “帮我找一个 AWS Lambda 的图标，并用 React 组件封装它。”

AI Agent: (调用 MCP 工具搜索 aws lambda) -> (获取 SVG 数据) -> (生成代码)

// AI 自动生成的代码
import React from 'react';

const AwsLambdaIcon = ({ size = 24, color = "#FF9900" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* SVG Path Data from theSVG */}
    <path d="..." fill={color} />
  </svg>
);

export default AwsLambdaIcon;

为什么选择 theSVG？

1. 准确性：直接使用官方发布的最新图标，避免从过时博客或论坛下载错误 Logo。
2. 效率：无需手动下载、重命名、优化 SVG。一行代码即可引入。
3. 一致性：所有图标经过统一规范化处理（ViewBox, 尺寸, 命名），确保视觉风格一致。
4. AI 协同：专为 AI 编程时代设计，让机器也能“看懂”并正确使用图标资源。