Was macht iOS-Icon-Generator?
Generiere PNG-Icon-Imagesets für Xcode-Asset-Kataloge aus zwei Quellen.
Wann aktivieren
- Generieren von Icon-Assets für ein iOS/macOS-Xcode-Projekt
- Suche nach Icons in Open-Source-Sammlungen
- Erstellen von PNG-Imagesets (1x, 2x, 3x) für Asset-Kataloge
- Ersetzen von Platzhalter-Icons durch professionelle Assets
- Anpassen an bestehende Icon-Stile in einem Xcode-Projekt
Kernprinzipien
1. Zwei Quellen, ein Ausgabeformat
Beide Quellen erzeugen identische, Xcode-kompatible Imagesets. Wähle je nach Bedarf:
| Quelle | Icons | Erfordert | Am besten für |
|---|---|---|---|
| Iconify-API | 275.000+ aus 200+ Sammlungen | Internet | Große Auswahl, spezifische Stile, Open-Source-Icons |
| SF Symbols | 5.000+ Apple-Symbole | macOS | Apple-nativer Stil, Offline-Nutzung |
2. Immer vorhandenen Stil übernehmen
Überprüfe vor dem Generieren die vorhandenen Icons im Projekt auf Größen-, Farb- und Linienstärke-Konsistenz.
3. Ausgabestruktur
Beide Methoden erzeugen ein vollständiges Xcode-Imageset:
<ausgabe-verz>/<asset-name>.imageset/
Contents.json
<asset-name>.png # 1x (68px Standard)
<asset-name>@2x.png # 2x (136px Standard)
<asset-name>@3x.png # 3x (204px Standard)
Beispiele
Schritt 1: Anforderungen ermitteln
Bestimme die Icon-Anforderungen: Was das Icon darstellt, bevorzugter Stil, Zielfarbe und Größe.
Wenn das Projekt bereits Icons hat, überprüfe den vorhandenen Stil:
# Überprüfe die Abmessungen eines vorhandenen Icons
sips -g pixelWidth -g pixelHeight pfad/zum/[email protected]
Schritt 2: Icons suchen
Iconify-API (empfohlen für große Auswahl):
# In allen Sammlungen suchen
$SKILL_DIR/scripts/iconify_gen.sh search "quittung"
# In einer bestimmten Sammlung suchen
$SKILL_DIR/scripts/iconify_gen.sh search "visitenkarte" --prefix mdi
# Verfügbare Sammlungen auflisten
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (für Apple-nativen Stil): Durchsuche die SF Symbols App oder nutze gebräuchliche Namen:
| Verwendung | Symbolname |
|---|---|
| Dokument | doc.text, doc.fill |
| Quittung | doc.text.below.ecg, receipt |
| Person | person.crop.rectangle, person.text.rectangle |
| Kamera | camera, camera.fill |
| Scan | doc.viewfinder, qrcode.viewfinder |
| Einstellungen | gearshape, slider.horizontal.3 |
Schritt 3: Vorschau (optional)
# Iconify-Vorschau
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
Schritt 4: Generieren
Iconify-API:
# Einfache Generierung
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# Benutzerdefinierte Farbe und Ausgabepfad
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
Optionen: --size <pt> (Standard: 68), --color <hex> (Standard: 8E8E93), --output <verz> (Standard: /tmp/icons)
SF Symbols:
# Einfache Generierung
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# Benutzerdefinierte Farbe, Strichstärke und Ausgabe
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
Optionen: --size <pt> (Standard: 68), --color <hex> (Standard: 8E8E93), --weight <name> (Standard: thin), --output <verz> (Standard: /tmp/icons)
Schritt 5: Überprüfen und integrieren
- Lies das generierte @2x-PNG zur visuellen Überprüfung
- Kopiere es in den Asset-Katalog, falls nicht direkt dorthin ausgegeben:
cp -r /tmp/icons/<name>.imageset pfad/zu/Assets.xcassets/<gruppe>/ - Baue das Projekt, um zu überprüfen, ob Xcode die neuen Assets übernimmt
Beliebte Iconify-Sammlungen
| Präfix | Name | Anzahl | Stil |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Gefüllt + Outline-Varianten |
ph | Phosphor | 9000+ | 6 Strichstärken pro Icon |
solar | Solar | 7400+ | Fett, linear, Outline |
tabler | Tabler Icons | 6000+ | Einheitliche Strichbreite |
lucide | Lucide | 1700+ | Sauber, minimalistisch |
ri | Remix Icon | 3100+ | Gefüllt + Line-Varianten |
carbon | Carbon | 2400+ | IBM-Designsprache |
heroicons | HeroIcons | 1200+ | Tailwind CSS Begleiter |
Alle durchsuchen: https://icon-sets.iconify.design/
Skript-Referenz
| Skript | Quelle | Pfad |
|---|---|---|
iconify_gen.sh | Iconify-API (275k+ Icons) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols (5k+ Icons) | $SKILL_DIR/scripts/generate_icons.swift |
Best Practices
- Vor dem Generieren suchen – Durchstöbere verfügbare Icons, um die beste Übereinstimmung zu finden
- Vorhandenen Projektstil übernehmen – Überprüfe Abmessungen, Farbe und Strichstärke vorhandener Icons, bevor du neue generierst
- Iconify für Vielfalt nutzen – Über 200 Sammlungen ermöglichen es, den exakt passenden Stil zu finden
- SF Symbols für Apple-Konsistenz nutzen – Sie passen perfekt zur System-UI
- Direkt in den Asset-Katalog generieren – Verwende
--output ./Assets.xcassets/icons, um manuelles Kopieren zu vermeiden - Visuell überprüfen – Vorschaue immer das @2x-PNG, bevor du es eincheckst
Anti-Patterns
- Generieren von Icons ohne vorherige Prüfung des vorhandenen Icon-Stils im Projekt
- Verwenden von Standardfarben, wenn das Projekt eine definierte Farbpalette hat
- Generieren in falschen Größen (zuerst vorhandene Icons prüfen)
- Generierte Icons ohne visuelle Überprüfung einchecken