Demo

Related MCP server: XcodeBuildMCP

Hauptfunktionen

Erstellen von .icon-Bundles programmatisch aus PNG- oder SVG-Glyphen
Volle Liquid Glass-Unterstützung: spiegelnde Glanzlichter, Blur-Material, Schatten, Transparenz
Dark Mode + Erscheinungsbild-Varianten mit spezifischen Füllungen pro Erscheinungsbild
KI-Agenten-bereit: 12 MCP-Tools + 3 Workflow-Prompts mit integrierten Anweisungen

Installation

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

Hinzufügen zu ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Hinzufügen zu .cursor/mcp.json in Ihrem Projektstammverzeichnis (oder ~/.cursor/mcp.json für global):

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

Der Server erscheint unter Cursor Settings > MCP Servers. Kein Neustart erforderlich.

Hinzufügen zu .vscode/mcp.json in Ihrem Projektstammverzeichnis (oder öffnen Sie die Command Palette > MCP: Open User Configuration für global):

Hinweis: VS Code verwendet "servers" (nicht "mcpServers") und erfordert ein "type"-Feld.

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

Sie sehen Start/Stop/Restart-Schaltflächen direkt im Editor. Beim ersten Start werden Sie um eine Vertrauensbestätigung gebeten.

Aktivieren Sie zuerst MCP unter Windsurf Settings > Cascade > Model Context Protocol (MCP).

Fügen Sie dann Folgendes zu ~/.codeium/windsurf/mcp_config.json hinzu:

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

Drücken Sie die Aktualisieren-Schaltfläche in den Windsurf-Einstellungen, um den Server zu laden.

Der Server verwendet stdio-Transport. Die meisten MCP-Clients verwenden dieses Konfigurationsformat:

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

Oder starten Sie den Server direkt:

npx -y icon-composer-mcp

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

Funktionsweise

Glyphe bereitstellen — jedes PNG- oder SVG-Logo/Bild
.icon-Bundle erstellen — legt Hintergrundfüllung, Ebenenskalierung und Glaseffekte fest
Apples ictool rendert Liquid Glass — spiegelnde Glanzlichter, Schatten, Tiefe und Transparenz
Exportieren — Vorschau-PNGs, App Store-Marketing-Icon oder das .icon-Bundle für Xcode

Anforderungen

Node.js 18+
macOS mit Icon Composer für Liquid Glass-Rendering
```
brew install --cask icon-composer
```
Flache Vorschauen, Bundle-Erstellung/-Bearbeitung und Marketing-Export funktionieren auf jeder Plattform ohne Icon Composer

Führen Sie icon-composer doctor aus, um Ihr Setup zu überprüfen.

CLI-Befehle

Befehl	Beschreibung
`create`	Erstellt ein neues `.icon`-Bundle aus einem Vordergrundbild
`add-layer`	Fügt einem bestehenden Bundle eine Ebene hinzu
`remove`	Entfernt eine Ebene oder Gruppe
`inspect`	Liest und zeigt Bundle-Inhalte an
`glass`	Konfiguriert Liquid Glass-Effekte für eine Gruppe
`appearance`	Legt Dark Mode/Tinted Mode-Überschreibungen fest
`fill`	Legt die Hintergrundfüllung fest (einfarbig, Verlauf, automatisch, keine)
`position`	Legt Skalierung und Versatz von Ebene/Gruppe fest
`fx`	Schaltet alle Glaseffekte ein/aus
`preview`	Exportiert ein Vorschau-PNG (Liquid Glass oder flach)
`render`	Rendert pixelgenaues Liquid Glass via ictool
`export-marketing`	Exportiert flaches 1024x1024 PNG für App Store Connect (kein Alpha)
`doctor`	Überprüft System-Setup und Abhängigkeiten

Details

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

Option	Standard	Beschreibung
`--bg-color <hex>`	erforderlich	Hintergrundfarbe (z. B. `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	Bundle-Name (ohne `.icon`-Erweiterung)
`--dark-bg-color <hex>`	—	Hintergrundfarbe für Dark Mode
`--glyph-scale <n>`	`1.0`	Glyphen-Skalierung (1.0 = Standard ~65% der Icon-Fläche)
`--specular / --no-specular`	`true`	Spiegelndes Glanzlicht
`--shadow-kind <kind>`	`layer-color`	Schatten-Typ: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	Schatten-Deckkraft (0–1)
`--blur-material <n>`	—	Blur-Material-Wert (0–1)
`--translucency-enabled`	`false`	Transparenz-Verlauf aktivieren
`--translucency-value <n>`	`0.4`	Transparenz-Stärke (0–1)

Ausgabe: Erstellt <output_dir>/<bundle_name>.icon/ mit icon.json-Manifest und Assets/-Verzeichnis.

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

Option	Standard	Beschreibung
`--name <name>`	erforderlich	Ebenenname
`--group-index <n>`	`0`	Zielgruppen-Index
`--create-group`	`false`	Neue Gruppe für diese Ebene erstellen
`--opacity <n>`	`1.0`	Ebenen-Deckkraft (0–1)
`--scale <n>`	`1.0`	Ebenen-Skalierung
`--offset-x <n>`	`0`	X-Versatz in Punkten
`--offset-y <n>`	`0`	Y-Versatz in Punkten
`--blend-mode <mode>`	`normal`	Mischmodus (z. B. `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	An Liquid Glass-Effekten teilnehmen

Unterstützte Formate: .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>

Ausgabe: Gibt das vollständige Manifest-JSON aus und listet alle Assets mit Größen auf.

icon-composer glass <bundle_path> [options]

Option	Beschreibung
`--group-index <n>`	Zielgruppe (Standard: `0`)
`--specular / --no-specular`	Spiegelndes Glanzlicht
`--blur-material <n>`	Blur-Stärke (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color` oder `none`
`--shadow-opacity <n>`	Schatten-Deckkraft (0–1)
`--translucency-enabled / --no-translucency-enabled`	Transparenz-Umschalter
`--translucency-value <n>`	Transparenz-Stärke (0–1)
`--opacity <n>`	Gruppen-Deckkraft (0–1)
`--blend-mode <mode>`	Gruppen-Mischmodus
`--lighting <type>`	`combined` oder `individual`

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

Option	Beschreibung
`--target <type>`	`fill` (Hintergrundfarbe) oder `group` (Glaseffekte)
`--appearance <mode>`	`dark` oder `tinted`
`--bg-color <hex>`	Hintergrundfarbe für dieses Erscheinungsbild
`--specular / --no-specular`	Glanzlicht für dieses Erscheinungsbild
`--shadow-kind <kind>`	Schatten-Typ für dieses Erscheinungsbild
`--shadow-opacity <n>`	Schatten-Deckkraft für dieses Erscheinungsbild

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

Option	Beschreibung
`--type <type>`	`solid`, `gradient`, `automatic` oder `none`
`--color <hex>`	Primärfarbe (für einfarbig oder Verlauf unten)
`--color2 <hex>`	Sekundärfarbe (Verlauf oben)
`--gradient-angle <n>`	Verlaufswinkel in Grad (Standard: `0`)

icon-composer position <bundle_path> [options]

Option	Standard	Beschreibung
`--target <type>`	`layer`	`layer` oder `group`
`--group-index <n>`	`0`	Gruppen-Index
`--layer-index <n>`	—	Ebenen-Index (erforderlich für `--target layer`)
`--scale <n>`	—	Skalierungsfaktor (0.05–3.0)
`--offset-x <n>`	—	X-Versatz in Punkten
`--offset-y <n>`	—	Y-Versatz in Punkten

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

Aktiviert oder deaktiviert Glanzlicht, Schatten, Blur und Transparenz für alle Gruppen gleichzeitig.

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

Option	Standard	Beschreibung
`--size <n>`	`1024`	Ausgabegröße in Pixeln
`--appearance <mode>`	—	`dark` oder `tinted`
`--flat`	`false`	Flaches Rendering erzwingen (Liquid Glass überspringen)
`--canvas-bg <preset>`	—	`light`, `dark`, `checkerboard`, `homescreen-light`, `homescreen-dark`
`--apple-preset <name>`	—	Apple-Hintergrundbild: `sine-purple-orange`, `sine-gasfl

Icon Composer MCP

Demo

Hauptfunktionen

Installation

Funktionsweise

Anforderungen

CLI-Befehle

Details

Resources

Tools

Latest Blog Posts

MCP directory API