Phosphor Icons MCP Server

Ein Model Context Protocol (MCP) Server, der Zugriff auf Phosphor Icons bietet – eine flexible Icon-Familie mit 6 verschiedenen Gewichtungen und über 1.000 Icons.

Wichtig: Dies ist ein von der Community betriebener, KI-unterstützter MCP-Server und kein offizielles Repository oder mit dem Phosphor Icons-Projekt verbunden. Dieses Projekt wurde mit KI-Unterstützung erstellt und wird von der Community gepflegt. Das ursprüngliche Phosphor Icons-Projekt finden Sie unter https://github.com/phosphor-icons.

Funktionen

• 🎨 6 Icon-Gewichtungen: thin, light, regular, bold, fill und duotone

• 🌈 Farbanpassung: Wenden Sie jede Farbe an (Hex, RGB, benannte Farben oder currentColor)

• 📏 Größensteuerung: Geben Sie benutzerdefinierte Größen in Pixeln an

• 🔍 Icons suchen: Finden Sie Icons nach Name, Kategorie oder Tags

• 📦 Batch-Operationen: Rufen Sie mehrere Icons gleichzeitig ab

• 📚 Katalogzugriff: Durchsuchen Sie alle verfügbaren Icons mit Metadaten

• 🛠️ Implementierungsleitfäden: Erhalten Sie Hilfe bei der Integration in spezifische Frameworks

Related MCP server: Iconify MCP Server

Installation

npm install

CLI

Das Paket enthält eine phosphor-icons CLI zum Exportieren von SVG/PNG-Assets, ohne MCP aufzurufen.

Für die lokale Entwicklung bauen Sie das Projekt zuerst und führen die kompilierte CLI aus:

npm run build
node dist/cli.js icon heart --weight bold --color "#ef4444" --size 32 --out heart.svg
node dist/cli.js icon house user gear --format png --size 24 --dir ./icons
node dist/cli.js search arrow --limit 5
node dist/cli.js categories

Nach der Paketinstallation verwenden Sie den bin-Befehl:

phosphor-icons icon heart --size 16 --out heart.svg
phosphor-icons icon heart --format png --size 16 --out heart.png
phosphor-icons search arrow --limit 5
phosphor-icons categories

CLI-Befehle:

• icon <name...>: Ruft ein oder mehrere Icons als SVG oder PNG ab.

• search <query>: Durchsucht Icon-Namen sowie gebündelte Metadaten.

• categories: Listet gebündelte Kategorien und Beispiele auf.

• skill path: Gibt den Pfad zum gebündelten Codex-Skill-Verzeichnis aus.

Flags für icon:

• --weight, -w: thin, light, regular, bold, fill oder duotone.

• --color, -c: Jeder SVG-Farbwert, einschließlich currentColor.

• --size, -s: Pixelgröße für Breite und Höhe.

• --format, -f: svg oder png.

• --out, -o: Ausgabedatei für ein einzelnes Icon.

• --dir, -d: Ausgabeverzeichnis für Batch-Exporte.

Die CLI liest Icons zuerst aus dem installierten @phosphor-icons/core-Paket. Dies hält den Icon-Export schnell, deterministisch und offline nach npm install. Wenn keine lokalen Assets verfügbar sind, greift sie auf die Raw-URL von Phosphor Core auf GitHub zurück.

CLI-Rauchtest

npm install
npm run build
node dist/cli.js icon heart --size 16 --out live-heart.svg
node dist/cli.js icon heart --format png --size 16 --out live-heart.png
node dist/cli.js search arrow --limit 5

Erwartet:

• live-heart.svg enthält width="16" height="16".

• live-heart.png wird mit einer Dateigröße ungleich Null erstellt.

• Die Suche liefert pfeilbezogene Icon-Namen zurück.

Skills-Erweiterung

Dieses Paket enthält einen Codex/Agents-Skill unter skills/phosphor-icons/SKILL.md. Nach der Installation des Pakets finden Sie ihn mit:

phosphor-icons skill path

Der Skill gibt Agenten prägnante Regeln für die Icon-Suche, den Abruf, den Export und die Framework-Implementierung. Verwenden Sie diesen Pfad, wenn Sie den Skill bei einer Agent-Runtime registrieren oder in ein Agent-Skill-Verzeichnis kopieren.

Vercel Skills CLI-Kompatibilität

Das Repository ist mit dem skills CLI-Format von Vercel Labs kompatibel: Skills liegen unter skills/<name>/SKILL.md und die Datei beginnt mit name und description YAML-Frontmatter.

Listen Sie Skills aus diesem Repository auf:

npm run skills:list
# or
npx skills add . --list

Installieren Sie den gebündelten Skill aus einem lokalen Checkout:

npx skills add . --skill phosphor-icons --agent codex --copy -y

Installieren Sie nach der Veröffentlichung von GitHub:

npx skills add lasaths/phosphor-icons-mcp --skill phosphor-icons --agent codex -y

Installieren Sie aus einem npm-Paket-Checkout durch Auflösen des Skill-Pfads:

phosphor-icons skill path
npx skills add ./skills/phosphor-icons --agent codex --copy -y

Entwicklung

Starten Sie den Entwicklungsserver:

npm run dev

Dies startet den Server auf Port 8081 und öffnet den Smithery-Playground zum Testen.

Konfiguration

Der Server unterstützt einen optionalen Konfigurationsparameter:

• defaultWeight: Legt die Standard-Icon-Gewichtung fest (thin, light, regular, bold, fill, duotone). Standard: regular

Tools

get-icon

Ruft ein oder mehrere SVG-Icons aus der Phosphor Icons-Bibliothek ab. Geben Sie entweder einen einzelnen Icon-Namen oder ein Array von Namen für den Batch-Abruf an.

Parameter:

• name (string, optional): Einzelner Icon-Name in kebab-case (z. B. 'arrow-left', 'user'). Verwenden Sie dies für ein einzelnes Icon.

• names (array, optional): Array von Icon-Namen für den Batch-Abruf. Verwenden Sie dies für mehrere Icons.

• weight (optional): Icon-Gewichtung/Stil

• color (optional): Icon-Farbe - akzeptiert Hex (#FF0000), RGB (rgb(255,0,0)), benannte Farben (red) oder 'currentColor'

• size (optional): Icon-Größe in Pixeln (setzt sowohl Breite als auch Höhe)

• format (optional): Ausgabeformat (svg oder png). Standard: svg

• saveToFile (optional): Pfad zum Speichern der PNG-Datei (nur für ein einzelnes Icon)

• saveDir (optional): Verzeichnis zum Speichern von PNG-Dateien (nur für mehrere Icons)

Beispiele:

get-icon name="heart" weight="bold" color="#FF0000"
get-icon names=["star", "heart"] weight="fill" color="gold" size=48
get-icon name="user" color="currentColor"

search-icons

Suchen Sie nach Icons nach Name, Kategorie oder Tags.

Parameter:

• query (string): Suchbegriff

• limit (optional): Maximale Anzahl der zurückzugebenden Ergebnisse (Standard: 10)

Beispiel:

search-icons query="arrow" limit=5

list-categories

Erhalten Sie eine Liste aller verfügbaren Icon-Kategorien.

Ressourcen

phosphor://catalog

Vollständiger Katalog beliebter Phosphor Icons mit Metadaten, einschließlich Kategorien, Tags und verfügbaren Gewichtungen.

phosphor://weights

Detaillierte Informationen zu den 6 verfügbaren Icon-Gewichtungen/Stilen und deren besten Anwendungsfällen.

Prompts

implement-icon

Erhalten Sie Anleitungen zur Implementierung eines Phosphor-Icons in Ihrem Projekt.

Parameter:

• iconName (string): Name des Icons

• framework (string): Frontend-Framework (html, react, vue, svelte, angular)

Veröffentlichung bei Smithery

1. Pushen Sie Ihren Code auf GitHub

2. Besuchen Sie smithery.ai/new

3. Verbinden Sie Ihr GitHub-Repository

4. Konfigurieren Sie automatische Deployments

Icon-Gewichtungen

• Thin: Zarte, minimale Striche - am besten für große Größen

• Light: Subtiles, raffiniertes Erscheinungsbild - moderne Designs

• Regular: Ausgewogen, vielseitig - allgemeine Verwendung (Standard)

• Bold: Stark, wirkungsvoll - Hervorhebung und kleine Größen

• Fill: Solide, gefüllte Formen - starke Hervorhebung

• Duotone: Zweifarbiges Design - visuelles Interesse

Beispiele

Ein rotes Herz-Icon in fett erhalten:

// Returns SVG content for a bold red heart icon
get-icon({ name: "heart", weight: "bold", color: "#FF0000" })

Ein blaues Stern-Icon in benutzerdefinierter Größe erhalten:

// Returns a 48px blue filled star icon
get-icon({ name: "star", weight: "fill", color: "#3B82F6", size: 48 })

Nach Navigations-Icons suchen:

// Returns list of icons related to navigation
search-icons({ query: "navigation", limit: 10 })

Mehrere farbige Icons für eine UI erhalten:

// Get home, user, and settings icons all in blue
get-icon({ 
  names: ["home", "user", "gear"],
  weight: "regular",
  color: "#3B82F6",
  size: 24
})

Haftungsausschluss

KEINE GARANTIE ODER HAFTUNG

DIESE SOFTWARE WIRD "WIE BESEHEN" ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, DER EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND DER NICHTVERLETZUNG VON RECHTEN DRITTER. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, SEI ES AUS VERTRAG, UNERLAUBTER HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN VERBINDUNG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN GESCHÄFTEN MIT DER SOFTWARE ERGEBEN.

NUTZUNG AUF EIGENE GEFAHR

• Dies ist ein inoffizielles, von der Community betriebenes Projekt, das mit KI-Unterstützung erstellt wurde

• Die Software wird ohne Garantien oder Support bereitgestellt

• Benutzer sind dafür verantwortlich, die Software für ihre Anwendungsfälle zu testen und zu validieren

• Die Betreuer sind nicht verantwortlich für Schäden, Datenverlust oder Probleme, die sich aus der Nutzung dieser Software ergeben

• Dieses Projekt wird nicht vom offiziellen Phosphor Icons-Projekt unterstützt oder ist mit diesem verbunden

Lizenz

Dieser MCP-Server ist unter der MIT-Lizenz lizenziert. Phosphor Icons sind ebenfalls unter der MIT-Lizenz lizenziert.

Links

• 🌐 Phosphor Icons Website

• 💻 Original Phosphor Icons Repository (Offiziell)

• 📦 Phosphor Icons Core

• 📖 Smithery Dokumentation

• 🔧 MCP Protokoll

Credits

• Icons: Bereitgestellt von Phosphor Icons - erstellt von Tobias Fried

• MCP Server: Von der Community betriebenes Projekt, erstellt mit KI-Unterstützung

• Betreuer: Community-Mitwirkende (nicht mit Phosphor Icons verbunden)