@entro314labs/web图标生成器cli-mcp🎨
从单个源图像生成所有必需的web应用程序图标和文件。现代、快速且具有框架意识。
可用作CLI、MCP服务器和Claude桌面扩展！
特性
✅ 自动检测 app-icon.svg 或 app-icon.png 在当前目录中 ✅ 生成8个基本文件 （2025年最佳实践） ✅ 框架自动检测 （Next.js、Astro、SvelteKit、Remix、Vite） ✅ 在当前目录中生成 跑步时（尊重 process.cwd()) ✅ SVG和PNG支持 自动转换 ✅ 可屏蔽图标 带安全区填充（安卓13+） ✅ 单色Safari固定标签 图标 ✅ site.webmanifest 代 ✅ HTML代码片段 准备复制/粘贴 ✅ MCP服务器 用于Claude Desktop集成 ✅ Claude桌面扩展 快速行动 ✅ 零配置 –开箱即用
安装
# Run directly with npx (no installation needed)
npx @entro314labs/web-icons-generator-cli-mcp source.svg
# Shorter aliases
npx @entro314labs/web-icons-generator-cli-mcp@latest
# After install: create-icons, webicons, or web-icons-generator-cli-mcp
# Or install globally
npm install -g @entro314labs/web-icons-generator-cli-mcp
create-icons # shortest command!
webicons # also works用法
零配置（推荐）
# Place app-icon.svg or app-icon.png in your project root
cd my-project
npx @entro314labs/web-icons-generator-cli-mcp
# ✓ Found app-icon.svg in current directory
# ✓ Detected Next.js → using public/ directory
# ✨ Success! Generated 8 files基本用法
# With source file as argument
npx @entro314labs/web-icons-generator-cli-mcp logo.svg
# Or if installed globally (use shorter commands)
create-icons logo.svg
webicons logo.svg
# Interactive mode (prompts for source if not found)
create-icons高级选项
# Specify output directory
create-icons logo.svg --output ./public
# Custom Safari pinned tab color
create-icons logo.svg --color "#ff5733"
# Choose generation mode
create-icons logo.svg --mode nextjs # Next.js App Router (app/)
create-icons logo.svg --mode traditional # Traditional web app (public/)
create-icons logo.svg --mode auto # Auto-detect (default)
# Full example
create-icons logo.svg -o ./app -m nextjs -c "#1a1a1a"发电模式
该工具支持两种生成模式，以实现最大兼容性：
🚀 Next.js应用路由器模式(--mode nextjs)
非常适合Next.js 13+和应用路由器
生成的文件（in app/ 目录）：
favicon.ico(32×32)icon.png（512×512）-由Next.js自动链接apple-icon.png（180×180）-由Next.js自动链接apple-touch-icon.png（180×180）-兼容性icon.svg（如果源代码是SVG）-由Next.js自动链接
优点：
- ✅ 零配置-Next.js自动链接的图标
- ✅ 无手册 `` 需要标签
- ✅ 自动元数据生成
- ✅ 清洁项目结构
用途：
create-icons logo.svg --mode nextjs
# or let it auto-detect
create-icons logo.svg # detects Next.js App Router automatically📁 传统模式(--mode traditional)
非常适合所有其他框架和传统web应用程序
生成的文件（in public/ 目录）：
favicon.ico(32×32)icon.svg（可扩展）icon-192.png（192×192）-用于PWAicon-512.png（512×512）-用于PWAapple-touch-icon.png(180×180)icon-maskable.png（512×512，带填充）-适用于Androidsafari-pinned-tab.svg（单色）-适用于Safari浏览器site.webmanifest（PWA清单）
要求： 手动HTML集成（复制自 html-snippet.txt)
用途：
create-icons logo.svg --mode traditional生成的文件
生成的文件
传统模式 在输出目录中生成以下文件：
/public/
├── favicon.ico (32×32)
├── icon.svg (scalable)
├── icon-192.png (192×192)
├── icon-512.png (512×512)
├── apple-touch-icon.png (180×180)
├── icon-maskable.png (512×512, with padding)
├── safari-pinned-tab.svg (monochrome)
└── site.webmanifest (PWA manifest)
/ (project root)
└── icon-integration-guide.txt (HTML snippet to copy)Next.js应用路由器模式 在您的应用程序目录中生成以下文件：
/app/ (or /src/app/)
├── favicon.ico (32×32)
├── icon.png (512×512, auto-linked)
├── icon.svg (scalable, auto-linked)
├── apple-icon.png (180×180, auto-linked)
└── apple-touch-icon.png (180×180, compatibility)
/ (project root)
└── icon-integration-guide.txt (integration instructions)框架检测
该工具会自动检测您的框架，并使用正确的输出目录和模式：
| 框架 | 配置文件 | 默认模式 | 输出目录 |
|---|---|---|---|
| Next.js（应用路由器） | next.config.js + app/ | nextjs | app/ |
| Next.js（页面） | next.config.js | traditional | public/ |
星的 astro.config.mjs | traditional | public/ | |
| SvelteKit | svelte.config.js | traditional | static/ |
| 混音 | remix.config.js | traditional | public/ |
| 快 | vite.config.js | traditional | public/ |
| 默认 | 未检测到 | traditional | public/ |
HTML集成
Next.js应用路由器（自动链接）
不需要手动HTML！Next.js会自动生成以下标签：
传统模式（手动集成）
生成后，复制以下内容 icon-integration-guide.txt 到您的HTML ``:
AI助手集成
生成后，该工具提供了一个AI就绪提示，您可以使用Claude、ChatGPT或其他助手来验证您的设置：
I generated web app icons in the [directory] for this [framework] app.
Please read the integration guide at icon-integration-guide.txt and verify
that all icon files are correctly placed and properly integrated.需求
- Node.js 18岁或以上
- 源图像 SVG、PNG或JPG格式
- 为了获得最佳效果，请使用 方形SVG 透明背景
支持的输入格式
.svg–推荐（可扩展，生成所有文件）.png–良好（生成光栅图标，SVG文件需要手动创建）.jpg/.jpeg–可接受（生成光栅图标，SVG文件需要手动创建）
运作原理
- 寻找
app-icon.svg或app-icon.png在当前目录中（或使用提供的路径） - 检测您的框架 （Next.js、Astro等）并确定最佳生成模式
- 自动选择模式：Next.js应用路由器→
nextjs模式，其他→traditional模式 - 转换和调整大小 将源图像调整为所选模式所需的所有大小
- 生成可屏蔽图标 具有适当的20%安全区填充（传统模式）
- 创建单色SVG 适用于Safari固定选项卡（仅SVG源，传统模式）
- 生成清单 具有正确的图标参考（传统模式）
- 输出集成指南 在
html-snippet.txt
为什么是这个工具？
大多数图标生成器是：
- ❌ 过时（生成30+不必要的文件）
- ❌ 仅限在线（需要上传您的徽标）
- ❌ 不支持框架（手动目录设置）
- ❌ 缺少现代功能（可屏蔽图标、SVG图标）
- ❌ 不支持Next.js应用路由器约定
此工具：
- ✅ 只生成您需要的内容（2025年标准）
- ✅ 脱机工作（基于CLI）
- ✅ 自动检测您的框架
- ✅ 包括现代PWA功能
- ✅ 支持Next.js应用路由器，零配置自动链接
- ✅ 双模式支持：传统网络应用+Next.js
示例
示例1：零配置（推荐）
cd my-nextjs-app
# Create app-icon.svg in the project root
create-icons
# ✓ Found app-icon.svg in current directory
# ✓ Detected Next.js → using public/ directory
# ✨ Success! Generated 8 files示例2：带有自定义路径的Next.js项目
cd my-nextjs-app
create-icons assets/logo.svg
# ✓ Detected Next.js → using public/ directory
# ✨ Success! Generated 8 files示例3：自定义输出
create-icons assets/brand.svg --output static/icons
# Generated icons in static/icons/示例4：品牌颜色
create-icons logo.svg --color "#ff6b35"
# Safari pinned tab will use #ff6b35浏览器支持
| 文件 | 支持的浏览器 |
|---|---|
favicon.ico | 所有浏览器（旧版回退） |
icon.svg | Chrome 80+、Firefox 41+、Safari 9+ |
apple-touch-icon.png | iOS Safari、macOS Safari |
icon-192.png, icon-512.png | Chrome/edge（PWA）、安卓 |
icon-maskable.png | 安卓13+（自适应图标） |
safari-pinned-tab.svg | Safari 9+（固定标签） |
故障排除
“找不到源文件”
- 确保源映像的路径正确
- 使用相对或绝对路径：
./logo.svg或/Users/you/project/logo.svg
“文件格式无效”
- 仅支持SVG、PNG和JPG
- 先将其他格式（WebP、GIF）转换为PNG
图标未显示
- 确保文件位于域根目录(
https://yourdomain.com/favicon.ico) - 检查HTML `` 标签存在
- 清除浏览器缓存（硬刷新：Cmd+Shift+R/Ctrl+Shift+R）
MCP服务器和克劳德桌面
此软件包包括一个MCP（模型上下文协议）服务器，用于与Claude Desktop集成。 4种可用工具 用于完整的图标工作流。
快速设置
添加到您的Claude Desktop配置中：
{
"mcpServers": {
"web-icons": {
"command": "npx",
"args": ["-y", "@entro314labs/web-icons-generator-cli-mcp", "--mcp"]
}
}
}可用工具
generate_web_icons-从任何源图像生成图标+清单auto_generate_icons-零配置生成（查找应用程序图标.svg/png）check_icons_status-审核哪些图标存在/缺失integrate_icons_html-自动向HTML文件添加图标标签
与Claude一起使用
请Claude帮助处理图标：
- “为我的Next.js项目生成web图标”
- “检查我的项目是否有所有必需的图标”
- “从logo.svg创建图标并将其添加到我的HTML中”
- “将图标标签添加到我的index.html文件中”
看 MCP-TOOLS.md 以获取详细的工具参考。
看 MCP.md 以获取完整的文档。
发展
# Clone repository
git clone https://github.com/entro314-labs/web-icons-generator-cli-mcp.git
cd web-icons-generator-cli-mcp
# Install dependencies
npm install
# Build
npm run build
# Test CLI
npm link
web-icons-generator-cli-mcp test.svg
# Test MCP server
web-icons-generator-cli-mcp --mcp
## License
MIT
## Credits
Built with:
- [sharp](https://sharp.pixelplumbing.com/) – High-performance image processing
- [commander](https://github.com/tj/commander.js) – CLI framework
- [ora](https://github.com/sindresorhus/ora) – Elegant terminal spinners
- [chalk](https://github.com/chalk/chalk) – Terminal styling
- [prompts](https://github.com/terkelg/prompts) – Interactive prompts
---
Made with ❤️ for modern web developers who want simple, correct icon generation.