Générateur d'icônes iOS
Génère des jeux d'images PNG pour les catalogues d'actifs Xcode à partir de deux sources.
Quand activer
- Générer des actifs d'icônes pour un projet Xcode iOS/macOS
- Rechercher des icônes dans des collections open source
- Créer des jeux d'images PNG (1x, 2x, 3x) pour les catalogues d'actifs
- Remplacer les icônes temporaires 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 jeux d'images identiques et compatibles 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 correspondre au style existant
Avant de générer, vérifiez les icônes existantes du projet pour la cohérence de taille, couleur et poids.
3. Structure de sortie
Les deux méthodes produisent un jeu d'images 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 préféré, la couleur cible et la taille.
Si le projet a 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é 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 :
| Cas d'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 |
| Scanner | doc.viewfinder, qrcode.viewfinder |
| Paramètres | 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 et emplacement de sortie personnalisés
$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 <dir> (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, poids et sortie personnalisés
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 <name> (défaut : thin), --output <dir> (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 s'il n'y est pas directement sorti :
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 pleines + contours |
ph | Phosphor | 9000+ | 6 poids par icône |
solar | Solar | 7400+ | Gras, linéaire, contour |
tabler | Tabler Icons | 6000+ | Épaisseur de trait cohérente |
lucide | Lucide | 1700+ | Propre, minimal |
ri | Remix Icon | 3100+ | Variantes pleines + 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
- Rechercher avant de générer — parcourez les icônes disponibles pour trouver la meilleure correspondance
- Correspondre au style existant du projet — vérifiez les dimensions, la couleur et le poids des icônes existantes avant d'en générer de nouvelles
- Utiliser Iconify pour la variété — 200+ collections vous permettent de trouver le style exact dont vous avez besoin
- Utiliser SF Symbols pour la cohérence Apple — ils correspondent parfaitement à l'interface système
- Générer directement dans le catalogue d'actifs — utilisez
--output ./Assets.xcassets/iconspour éviter la copie manuelle - Vérifier visuellement — toujours prévisualiser le PNG @2x avant de valider
Anti-patrons
- Générer des icônes sans vérifier le style des icônes existantes du projet
- Utiliser les couleurs par défaut alors que le projet a une palette de couleurs définie
- Générer à des tailles incorrectes (vérifiez d'abord les icônes existantes)
- Valider des icônes générées sans vérification visuelle