演示

Related MCP server: XcodeBuildMCP

主要功能

claude mcp add icon-composer -- npx -y icon-composer-mcp

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

添加到项目根目录下的 .cursor/mcp.json（或全局 ~/.cursor/mcp.json）：

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

服务器将出现在 Cursor 设置 > MCP 服务器 中。无需重启。

添加到项目根目录下的 .vscode/mcp.json（或打开 命令面板 > MCP: Open User Configuration 进行全局配置）：

注意： VS Code 使用 "servers"（而非 "mcpServers"）并且需要一个 "type" 字段。

{
  "servers": {
    "icon-composer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

你将在编辑器中看到 Start/Stop/Restart 按钮。首次启动时会提示信任确认。

首先，在 Windsurf 设置 > Cascade > Model Context Protocol (MCP) 中启用 MCP。

然后添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

按下 Windsurf 设置中的刷新按钮以加载服务器。

该服务器使用 stdio 传输。大多数 MCP 客户端使用此配置格式：

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

或者直接运行服务器：

npx -y icon-composer-mcp

npm install -g icon-composer-mcp
icon-composer --help

Node.js 18+
macOS，需安装 Icon Composer 以进行 Liquid Glass 渲染
```
brew install --cask icon-composer
```
平面预览、捆绑包创建/编辑和营销导出可在任何平台上运行，无需 Icon Composer

运行 icon-composer doctor 以检查你的设置。

命令	描述
`create`	从前景图像创建新的 `.icon` 捆绑包
`add-layer`	向现有捆绑包添加图层
`remove`	移除图层或组
`inspect`	读取并显示捆绑包内容
`glass`	配置组上的 Liquid Glass 效果
`appearance`	设置深色/着色模式覆盖
`fill`	设置背景填充（纯色、渐变、自动、无）
`position`	设置图层/组缩放和偏移
`fx`	切换所有玻璃效果的开启/关闭
`preview`	导出预览 PNG（Liquid Glass 或平面）
`render`	通过 ictool 渲染像素完美的 Liquid Glass
`export-marketing`	为 App Store Connect 导出 1024x1024 平面 PNG（无 alpha 通道）
`doctor`	检查系统设置和依赖项

icon-composer create <foreground_path> <output_dir> --bg-color <hex> [options]

选项	默认值	描述
`--bg-color <hex>`	必填	背景颜色 (例如 `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	捆绑包名称 (不带 `.icon` 后缀)
`--dark-bg-color <hex>`	—	深色模式背景颜色
`--glyph-scale <n>`	`1.0`	字形缩放 (1.0 = 标准，约图标区域的 65%)
`--specular / --no-specular`	`true`	镜面高光
`--shadow-kind <kind>`	`layer-color`	阴影类型: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	阴影不透明度 (0–1)
`--blur-material <n>`	—	模糊材质值 (0–1)
`--translucency-enabled`	`false`	启用半透明渐变
`--translucency-value <n>`	`0.4`	半透明度 (0–1)

输出： 创建 <output_dir>/<bundle_name>.icon/，包含 icon.json 清单和 Assets/ 目录。

icon-composer add-layer <bundle_path> <image_path> --name <name> [options]

选项	默认值	描述
`--name <name>`	必填	图层名称
`--group-index <n>`	`0`	目标组索引
`--create-group`	`false`	为此图层创建新组
`--opacity <n>`	`1.0`	图层不透明度 (0–1)
`--scale <n>`	`1.0`	图层缩放
`--offset-x <n>`	`0`	X 轴偏移 (点)
`--offset-y <n>`	`0`	Y 轴偏移 (点)
`--blend-mode <mode>`	`normal`	混合模式 (例如 `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	参与 Liquid Glass 效果

支持的格式： .png, .jpg, .jpeg, .svg, .webp, .heic, .heif

icon-composer remove <bundle_path> --target <layer|group> --group-index <n> [--layer-index <n>]

icon-composer inspect <bundle_path>

输出： 打印完整的清单 JSON 并列出所有资产及其大小。

icon-composer glass <bundle_path> [options]

选项	描述
`--group-index <n>`	目标组 (默认: `0`)
`--specular / --no-specular`	镜面高光
`--blur-material <n>`	模糊量 (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color`, 或 `none`
`--shadow-opacity <n>`	阴影不透明度 (0–1)
`--translucency-enabled / --no-translucency-enabled`	半透明开关
`--translucency-value <n>`	半透明度 (0–1)
`--opacity <n>`	组不透明度 (0–1)
`--blend-mode <mode>`	组混合模式
`--lighting <type>`	`combined` 或 `individual`

icon-composer appearance <bundle_path> --target <fill|group> --appearance <dark|tinted> [options]

icon-composer fill <bundle_path> --type <solid|gradient|automatic|none> [options]

选项	描述
`--type <type>`	`solid`, `gradient`, `automatic`, 或 `none`
`--color <hex>`	主色 (用于纯色或渐变底部)
`--color2 <hex>`	次色 (渐变顶部)
`--gradient-angle <n>`	渐变角度 (度) (默认: `0`)

icon-composer position <bundle_path> [options]

icon-composer fx <bundle_path> --enable|--disable

同时启用或禁用所有组上的镜面高光、阴影、模糊和半透明度。

icon-composer preview <bundle_path> <output_path> [options]

选项	默认值	描述
`--size <n>`	`1024`	输出像素大小
`--appearance <mode>`	—	`dark` 或 `tinted`
`--flat`	`false`	强制平面渲染 (跳过 Liquid Glass)
`--canvas-bg <preset>`	—	`light`, `dark`, `checkerboard`, `homescreen-light`, `homescreen-dark`
`--apple-preset <name>`	—	Apple 壁纸: `sine-purple-orange`, `sine-gasflame`, `sine-magenta`, `sine-green-yellow`, `sine-purple-orange-black`, `sine-gray`
`--canvas-bg-color <hex>`	—	自定义背景颜色
`--canvas-bg-image <path>`	—	自定义背景图像
`--zoom <n>`	`1.0`	缩放级别 (相对于画布的图标大小)

输出： PNG 文件。默认使用 Liquid Glass 渲染（如果未安装 Icon Composer，则回退到平面渲染）。

icon-composer render <bundle_path> <output_path> [options]

选项	默认值	描述
`--