theSVG CLI完全教程终端一条命令添加品牌图标告别手动复制粘贴【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvgtheSVG CLI是一款开源命令行工具能在终端里一条命令把 7,400 品牌 SVG 图标直接下载到你的项目中支持 React JSX、Vue 组件和纯 SVG 三种格式。无需打开浏览器搜索、复制粘贴也无需手动整理文件适合所有需要品牌 Logo 图标的前端开发者和独立开发者。为什么需要 theSVG CLI写官网、做作品集或给产品加支持的服务栏时你可能经历过这样的流程打开品牌官网或 Figma 文件找 Logo手动复制 SVG 代码粘贴到项目里调整命名、路径和属性下一个品牌重复以上步骤而品牌 Logo 恰恰是最难找的那类图标——它们散落在各处 Press Kit 里。theSVG 把它们集中到一个开源库中7,400 图标4,600 品牌图标覆盖 115 分类☁️云架构图标739 个 AWS、626 个 Azure、214 个 Google Cloud 图标每个图标最多 7 种变体彩色、单色、浅色、深色、文字标等零配置npx直接运行不污染项目依赖一键安装三种方式任选其一方式一npx 直接运行推荐新手不安装任何东西在项目根目录直接执行npx thesvg/cli add github首次运行会缓存包之后速度很快。这也是官方文档 packages/cli/README.md 推荐的方式。方式二全局安装经常使用的话装一次即可npm install -g thesvg/cli thesvg add github方式三macOS Homebrewbrew tap glincker/thesvg brew install thesvg⚠️前置要求Node.js 18CLI 使用了原生fetch可用node -v检查版本。核心命令速查search、list、addCLI 只有三个命令学完 3 分钟就能上手命令作用典型用法thesvg search按关键词模糊搜索图标thesvg search version controlthesvg list浏览图标库可按分类过滤thesvg list --category AIthesvg add把图标下载进项目核心命令thesvg add github vercel第 1 步search 搜索图标不确定图标 slug 怎么拼先搜一下thesvg search github thesvg search cloud --limit 30搜索结果会列出每个图标的slug命令名、标题和可用变体。搜索支持模糊匹配比如输入fb也能找到 Facebook。搜索逻辑实现在 packages/cli/src/commands/search.ts它会把 slug、标题、别名、分类拼在一起做多词模糊匹配再按相关度排序。第 2 步list 按分类浏览thesvg list # 默认显示前 50 个 thesvg list --category AI # 只看 AI 分类 thesvg list --limit 200 # 显示更多结果分类包括AI、Cloud、Payment、DevTool、Browser等 115 种完整列表可在 packages/cli/src/commands/list.ts 查看实现。第 3 步add 添加图标主角登场确认 slug 后一条命令即可把图标写进项目# 添加单个图标默认输出 SVG thesvg add github # 一次添加多个 thesvg add github vercel nextjs tailwindcss # 指定输出目录 thesvg add github --dir ./src/assets/icons命令参数一览来自 packages/cli/src/commands/add.ts 的参数解析参数别名说明默认值--variant-v图标变体default/light/dark/mono/wordmarkdefault--dir-d输出目录自动检测--format-f输出格式svg/jsx/vuesvg最实用特性智能选择输出目录和格式自动目录检测不指定--dir时CLI 会根据项目结构自动选择存放位置检测逻辑见 packages/cli/src/utils/writer.ts存在public/目录Next.js / Vite / Astro 项目→ 保存到./public/icons/存在src/目录 → 保存到./src/icons/都没有 → 保存到./icons/目录不存在时会自动创建完全不用操心文件结构。三种输出格式① SVG默认——最通用的方式静态站、HTML、Markdown 都能用thesvg add github② JSX——React 项目首选自动生成带 TypeScript 类型的组件文件thesvg add github --format jsx生成的github.tsx是一个完整的 React 函数组件class等属性已自动转换为className可直接import GithubIcon使用。转换细节见 svgToJsx 函数。③ Vue 单文件组件thesvg add github --format vue输出标准的.vue文件SVG 包裹在template中拖进项目即用。变体variant怎么选变体适用场景default品牌原色最常用mono单色跟随文字颜色适合导航栏light白色版适合深色背景dark黑色版适合浅色背景wordmark完整文字 Logo适合页脚版权栏thesvg add github --variant dark容错机制如果某个图标没有你指定的变体CLI 会警告并自动回退到default不会中断批量添加流程见 add 命令容错逻辑。实战场景为官网添加技术栈区块假设你在做一个 Next.js 项目页脚要展示用到的服务。全程不需要离开终端# 1. 搜索确认 slug thesvg search aws # 2. 批量添加成 React 组件 thesvg add aws github vercel --format jsx --dir ./components/icons # 3. 代码里引用 # import AwsIcon from ./components/icons/aws;一次添加多个图标时如果某个 slug 写错了其余图标照常写入最后会汇总提示3/4 icons added, 1 failed方便排查。常见问题FAQQ提示Icon xxx not found in registryslug 拼错了。用thesvg search 关键词找正确的 slug注意图标名用连字符比如node-red、vuejs等以搜索结果为准。Q生成的图标文件名是什么规则文件名 slug 变体后缀 扩展名。默认变体如github.svg非默认变体如github-dark.svg、github-wordmark-dark.tsx见 buildFileName。QCLI 需要联网吗需要。图标按需从 theSVG 的静态图标源拉取无需账号、无需 API Key。项目资料延伸阅读想深入了解 CLI 的实现细节可以看看这些源码文件CLI 文档packages/cli/README.md命令入口与帮助文本packages/cli/src/index.tsadd 命令packages/cli/src/commands/add.tssearch 模糊匹配packages/cli/src/commands/search.tslist 分类浏览packages/cli/src/commands/list.ts文件写入与格式转换packages/cli/src/utils/writer.ts版本历史packages/cli/CHANGELOG.md图标源文件目录public/icons/每个品牌一个子目录内含各变体 SVG总结theSVG CLI 把找品牌图标从 10 分钟的浏览器操作压缩成 3 秒的终端命令thesvg search找到 slugthesvg add一条命令落盘格式、目录全自动React / Vue 项目直接生成可导入的组件对于每天都要和 Logo 打交道的开发者来说它是那种用一次就回不去的效率工具。现在就可以打开终端试试你的第一条命令 npx thesvg/cli add github【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考