Premiers pas

Collectez les noms ion-icon dans les templates et générez un enregistrement addIcons de production. Le développement peut enregistrer toutes les icônes ; la production inclut uniquement celles trouvées dans les templates.

Ce projet repose sur ionic-team/ionic-angular-standalone-codemods.

Versions prises en charge

• Node.js >= 22
• Ionic Angular >= 9.0.0
• Angular >= 18.0.0
• TypeScript >= 5.4.0
• ionicons >= 8.0.0
• @angular-eslint/template-parser 21 ou 22

Installation

npm install --save-dev \
  @rdlabo/ionic-angular-collect-icons \
  @angular-eslint/template-parser@^21

Utilisez plutôt @angular-eslint/template-parser@^22 si le projet utilise Angular ESLint 22. Le parseur est une dépendance homologue afin que le collecteur utilise la même version majeure du parseur de templates Angular que le projet.

Initialisation

Configurez addIcons et générez src/use-icons.ts :

npx @rdlabo/ionic-angular-collect-icons --initialize true

Vérifiez que src/use-icons.ts existe et que main.ts ou app.config.ts enregistre les icônes de production depuis ce fichier et les icônes de développement depuis ionicons/icons. Les étapes de configuration manuelle sont décrites dans Initialisation.

Vérifier le build

1. Ajoutez une icône statique à un template, par exemple <ion-icon name="home"></ion-icon>.
2. Exécutez npx @rdlabo/ionic-angular-collect-icons et vérifiez que l’export correspondant apparaît dans src/use-icons.ts.
3. Exécutez npm run build.

Automatisez le collecteur avec prebuild comme indiqué dans Utilisation. Les liaisons dynamiques [name] ne sont pas collectées : enregistrez ces icônes manuellement (FAQ).

Documentation

• Initialisation — configuration automatique ou manuelle de addIcons.
• Utilisation — exécution du collecteur avant les builds de production.
• Options de la CLI — --dry-run, --initialize, chemins.
• FAQ — tests, liaisons et main.ts.
• Migration — vérifications Ionic Angular 8 → 9 pour les applications existantes.