Web Icons Generator CLI MCP

@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）-用于PWA
• icon-512.png （512×512）-用于PWA
• apple-touch-icon.png (180×180)
• icon-maskable.png （512×512，带填充）-适用于Android
• safari-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)

框架检测

该工具会自动检测您的框架，并使用正确的输出目录和模式：

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文件需要手动创建）

运作原理

1. 寻找 app-icon.svg 或 app-icon.png 在当前目录中（或使用提供的路径）
2. 检测您的框架 （Next.js、Astro等）并确定最佳生成模式
3. 自动选择模式：Next.js应用路由器→ nextjs 模式，其他→ traditional 模式
4. 转换和调整大小 将源图像调整为所选模式所需的所有大小
5. 生成可屏蔽图标 具有适当的20%安全区填充（传统模式）
6. 创建单色SVG 适用于Safari固定选项卡（仅SVG源，传统模式）
7. 生成清单 具有正确的图标参考（传统模式）
8. 输出集成指南 在 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

浏览器支持

故障排除

“找不到源文件”

• 确保源映像的路径正确
• 使用相对或绝对路径： ./logo.svg 或 /Users/you/project/logo.svg

“文件格式无效”

• 仅支持SVG、PNG和JPG
• 先将其他格式（WebP、GIF）转换为PNG

图标未显示

1. 确保文件位于域根目录(https://yourdomain.com/favicon.ico)
2. 检查HTML `` 标签存在
3. 清除浏览器缓存（硬刷新：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"]
    }
  }
}

可用工具

1. generate_web_icons -从任何源图像生成图标+清单
2. auto_generate_icons -零配置生成（查找应用程序图标.svg/png）
3. check_icons_status -审核哪些图标存在/缺失
4. 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.