Was macht iOS-Icon-Generator?
Generieren Sie PNG-Icon-Imagestsets für Xcode-Asset-Kataloge aus zwei Quellen.
Wann aktivieren
- Generieren von Icon-Assets für ein iOS/macOS-Xcode-Projekt
- Suchen nach Icons in Open-Source-Sammlungen
- Erstellen von PNG-Imagestsets (1x, 2x, 3x) für Asset-Kataloge
- Ersetzen von Platzhalter-Icons durch produktionsreife Assets
- Anpassen an vorhandene Icon-Stile in einem Xcode-Projekt
Kernprinzipien
1. Zwei Quellen, ein Ausgabeformat
Beide Quellen erzeugen identische Xcode-kompatible Imagestsets. Wählen Sie je nach Bedarf:
| Quelle | Icons | Erfordert | Am besten geeignet für |
|---|---|---|---|
| Iconify-API | 275.000+ aus 200+ Sammlungen | Internet | Große Auswahl, spezifische Stile, Open-Source-Icons |
| SF Symbols | 5.000+ Apple-Symbole | Nur macOS | Apple-nativen Stil, Offline-Nutzung |
2. Immer vorhandenen Stil angleichen
Prüfen Sie vor der Generierung die vorhandenen Icons des Projekts auf Größen-, Farb- und Gewichtskonsistenz.
3. Ausgabestruktur
Beide Methoden erzeugen ein vollständiges Xcode-Imagesset:
<output-dir>/<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
Ermitteln Sie die Icon-Anforderungen: Was das Icon darstellt, bevorzugter Stil, Zielfarbe und -größe.
Wenn das Projekt bereits Icons hat, prüfen Sie den vorhandenen Stil:
# Abmessungen eines vorhandenen Icons prüfen
sips -g pixelWidth -g pixelHeight path/to/[email protected]
Schritt 2: Nach Icons suchen
Iconify-API (empfohlen für große Auswahl):
# In allen Sammlungen suchen
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"
# In einer bestimmten Sammlung suchen
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi
# Verfügbare Sammlungen auflisten
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (für Apple-nativen Stil): Durchsuchen Sie die SF Symbols-App oder referenzieren Sie gebräuchliche Namen:
| Anwendungsfall | Symbolname |
|---|---|
| Dokument | doc.text, doc.fill |
| Beleg | 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:
# Basisgenerierung
$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 <dir> (Standard: /tmp/icons)
SF Symbols:
# Basisgenerierung
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# Benutzerdefinierte Farbe, Gewicht 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 <dir> (Standard: /tmp/icons)
Schritt 5: Überprüfen und integrieren
- Lesen Sie das generierte @2x-PNG zur visuellen Überprüfung
- Kopieren Sie es in den Asset-Katalog, falls nicht direkt dort ausgegeben:
cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/ - Bauen Sie das Projekt, um zu überprüfen, ob Xcode die neuen Assets erkennt
Beliebte Iconify-Sammlungen
| Präfix | Name | Anzahl | Stil |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Gefüllte + Umrissvarianten |
ph | Phosphor | 9000+ | 6 Gewichte pro Icon |
solar | Solar | 7400+ | Fett, linear, Umriss |
tabler | Tabler Icons | 6000+ | Konsistente Strichstärke |
lucide | Lucide | 1700+ | Sauber, minimal |
ri | Remix Icon | 3100+ | Gefüllte + Linienvarianten |
carbon | Carbon | 2400+ | IBM Designsprache |
heroicons | HeroIcons | 1200+ | Tailwind CSS Begleitung |
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 – verfügbare Icons durchsuchen, um die beste Übereinstimmung zu finden
- Vorhandenen Projektstil angleichen – Abmessungen, Farbe und Gewicht vorhandener Icons vor der Generierung neuer Icons prüfen
- Iconify für Vielfalt nutzen – 200+ Sammlungen bieten Ihnen den genauen Stil, den Sie benötigen
- SF Symbols für Apple-Konsistenz verwenden – sie passen perfekt zur System-UI
- Direkt in den Asset-Katalog generieren – mit
--output ./Assets.xcassets/iconssparen Sie sich das manuelle Kopieren - Visuell überprüfen – immer das @2x-PNG vor dem Commit ansehen
Anti-Patterns
- Icons generieren, ohne den vorhandenen Icon-Stil im Projekt zu prüfen
- Standardfarben verwenden, wenn das Projekt eine definierte Farbpalette hat
- In falschen Größen generieren (vorhandene Icons zuerst prüfen)
- Generierte Icons ohne visuelle Überprüfung committen