Générateur d'icônes iOS
Générez des imagesets PNG pour les catalogues d'actifs Xcode à partir de deux sources.
Quand activer
- Générer des actifs d'icônes pour un projet iOS/macOS Xcode
- Rechercher des icônes dans des collections open source
- Créer des imagesets PNG (1x, 2x, 3x) pour les catalogues d'actifs
- Remplacer des icônes placeholder par des actifs de qualité production
- Adapter le style des icônes existantes dans un projet Xcode
Principes fondamentaux
1. Deux sources, un format de sortie
Les deux sources produisent des imagesets identiques et compatibles avec Xcode. Choisissez selon vos besoins :
| Source | Icônes | Nécessite | Idéal pour |
|---|---|---|---|
| API Iconify | 275 000+ issues de 200+ collections | Internet | Large sélection, styles spécifiques, icônes open source |
| SF Symbols | 5 000+ symboles Apple | macOS uniquement | Style natif Apple, utilisation hors ligne |
2. Toujours adapter au style existant
Avant de générer, vérifiez la taille, la couleur et la graisse des icônes existantes du projet pour assurer la cohérence.
3. Structure de sortie
Les deux méthodes produisent un imageset Xcode complet :
<dossier-sortie>/<nom-actif>.imageset/
Contents.json
<nom-actif>.png # 1x (68px par défaut)
<nom-actif>@2x.png # 2x (136px par défaut)
<nom-actif>@3x.png # 3x (204px par défaut)
Exemples
Étape 1 : Évaluer les besoins
Déterminez les besoins de l'icône : ce qu'elle représente, le style souhaité, la couleur cible et la taille.
Si le projet possède déjà des icônes, vérifiez le style existant :
# Vérifier les dimensions d'une icône existante
sips -g pixelWidth -g pixelHeight chemin/vers/[email protected]
Étape 2 : Rechercher des icônes
API Iconify (recommandée pour une large sélection) :
# Rechercher dans toutes les collections
$SKILL_DIR/scripts/iconify_gen.sh search "reçu"
# Rechercher dans une collection spécifique
$SKILL_DIR/scripts/iconify_gen.sh search "carte de visite" --prefix mdi
# Lister les collections disponibles
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (pour le style natif Apple) : Parcourez l'application SF Symbols ou référez-vous aux noms courants :
| Usage | Nom du symbole |
|---|---|
| Document | doc.text, doc.fill |
| Reçu | doc.text.below.ecg, receipt |
| Personne | person.crop.rectangle, person.text.rectangle |
| Appareil photo | camera, camera.fill |
| Scan | doc.viewfinder, qrcode.viewfinder |
| Réglages | gearshape, slider.horizontal.3 |
Étape 3 : Aperçu (optionnel)
# Aperçu Iconify
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
Étape 4 : Générer
API Iconify :
# Génération de base
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# Couleur personnalisée et emplacement de sortie
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
Options : --size <pt> (défaut : 68), --color <hex> (défaut : 8E8E93), --output <dossier> (défaut : /tmp/icons)
SF Symbols :
# Génération de base
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# Couleur personnalisée, graisse et sortie
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
Options : --size <pt> (défaut : 68), --color <hex> (défaut : 8E8E93), --weight <nom> (défaut : thin), --output <dossier> (défaut : /tmp/icons)
Étape 5 : Vérifier et intégrer
- Lisez le PNG @2x généré pour vérifier visuellement
- Copiez dans le catalogue d'actifs si la sortie n'y est pas directement :
cp -r /tmp/icons/<nom>.imageset chemin/vers/Assets.xcassets/<groupe>/ - Compilez le projet pour vérifier que Xcode prend en compte les nouveaux actifs
Collections Iconify populaires
| Préfixe | Nom | Nombre | Style |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Variantes remplies + contours |
ph | Phosphor | 9000+ | 6 graisses par icône |
solar | Solar | 7400+ | Gras, linéaire, contour |
tabler | Tabler Icons | 6000+ | Épaisseur de trait constante |
lucide | Lucide | 1700+ | Propre, minimaliste |
ri | Remix Icon | 3100+ | Variantes remplies + lignes |
carbon | Carbon | 2400+ | Langage de design IBM |
heroicons | HeroIcons | 1200+ | Compagnon Tailwind CSS |
Parcourez tout : https://icon-sets.iconify.design/
Référence des scripts
| Script | Source | Chemin |
|---|---|---|
iconify_gen.sh | API Iconify (275k+ icônes) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols (5k+ icônes) | $SKILL_DIR/scripts/generate_icons.swift |
Bonnes pratiques
- Recherchez avant de générer -- Parcourez les icônes disponibles pour trouver la meilleure correspondance
- Adaptez-vous au style existant du projet -- Vérifiez les dimensions, la couleur et la graisse des icônes existantes avant d'en générer de nouvelles
- Utilisez Iconify pour la variété -- 200+ collections vous permettent de trouver exactement le style dont vous avez besoin
- Utilisez SF Symbols pour la cohérence Apple -- Ils s'intègrent parfaitement à l'interface système
- Générez directement dans le catalogue d'actifs -- Utilisez
--output ./Assets.xcassets/iconspour éviter les copier-coller manuels - Vérifiez visuellement -- Prévisualisez toujours le PNG @2x avant de commiter
Anti-patrons
- Générer des icônes sans vérifier le style existant du projet
- Utiliser les couleurs par défaut alors que le projet a une palette définie
- Générer à des tailles incorrectes (vérifiez d'abord les icônes existantes)
- Commiter des icônes générées sans vérification visuelle