Ionic 3: Ajouter des icônes personnalisées

Blog 2017 Ionic 3: Ajouter des icônes personnalisées

Ionic 3: Ajouter des icônes personnalisées

07 novembre 2017 clemdesign

icône

Vous utilisez Ionic 3 mais vous ne trouvez pas votre bonheur dans les icônes proposées par le framework. Il est donc intéressant de pouvoir ajouter ses propres icônes personnalisées.

Les icônes proposées nativement par Ionic 3 sont géniales et satisfont dans la plupart des cas notre besoin, mais pour certaines applications il faudrait ajouter quelques nuances ou tout simplement une touche unique à son application grâce à des icônes personnalisées...
Je vous explique comment faire avec Ionic 3.

Préparer ses icônes

L'utilisation d'icônes dans Ionic se base sur des Icon Fonts, des polices d'écritures avec des icônes comme caractères, telles que Font Awesome ou encore IcoMoon.

L'idée est donc d'avoir:

Des fichiers de polices de caractères (.otf, .eot, .ttf...)
Une feuille de style pour implémenter les fichiers de polices (.css)

Créer des fichiers Fonts avec ses propres icônes

Avec un outil de IcoMoon, il est possible de générer des fichiers de polices avec ses propres icônes au format SVG.

Vous pouvez vous rendre par exemple sur Icon Finder, puis:

Chercher les icônes qui vous intéresse
Les télécharger au format SVG
Les uploader sur l'outil de IcoMoon (Import Icons en haut à gauche)
Sélectionner les icônes
Cliquer sur "Generate Fonts" puis télécharger les polices

Vous pouvez aussi réaliser vos propres icônes et les enregistrer au format SVG.

Utiliser des banques "d'Icons Font"

Il est également possible de télécharger des banques de polices d'icônes comme Font Awesome, que nous utiliserons dans la suite du guide.

Préparer son application

Il est temps de préparer votre application afin d'y intégrer Font Awesome.

Commencez par créer votre projet:

ionic start CustomIcons blank

Puis copiez le contenu de Zip<font-awesome>/fonts dans src/assets/fonts.

Copiez le contenu de Zip<font-awesome>/fonts dans src/theme/font-awesome.

Dans src/app/app.scss, ajoutez la ligne suivante:

// src/app/app.scss
// ...

@import "../theme/font-awesome/font-awesome";

Dans src/theme/font-awesome/_variables.scss, modifiez la variable $fa-font-path comme suit:

// src/theme/font-awesome/_variables.scss
// ...
$fa-font-path:        "../assets/fonts" !default;
// ...

Modifiez les fichiers suivants:

<!-- src/pages/home/home.html -->
<ion-header>
  <ion-navbar>
    <ion-title>
      Custom Icons App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>Ionic Icons:</ion-item>
  <ion-icon name="ionic"></ion-icon>
  <ion-icon name="star"></ion-icon>
  <ion-icon name="analytics"></ion-icon>

  <ion-item>Font-Awesome Icons:</ion-item>
  <ion-icon name="fa-font-awesome"></ion-icon>
  <ion-icon name="fa-smile-o"></ion-icon>
  <ion-icon name="fa-industry"></ion-icon>
</ion-content>

// src/pages/home/home.scss
ion-icon{
  font-size: 10rem;
  margin: 1rem;
}

Font Awesome est maintenant intégré à l'application Ionic, mais on doit effectuer quelques configurations pour que tout fonctionne.

Voici un aperçu du résultat à ce stade:
Icônes Ionic seulement

Configurer les styles

Dans Ionic, le style d'une icône doit avoir un squelette bien défini pour que celui-ci soit exploitable sur toutes les plateformes (Android, IOS, ...). Voici un exemple avec fa-font-awesome:

.fa-font-awesome:before ,
.ion-ios-fa-font-awesome:before ,
.ion-ios-fa-font-awesome-outline:before ,
.ion-md-fa-font-awesome:before ,
.ion-md-fa-font-awesome-outline:before  {
  content: "\f2b4";
}

Dans src/theme/font-awesome/_icons.scss, on a:

.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }

Cela est loin de ressembler à notre squelette!
Pas de panique, nous allons créer une mixin pour gérer toutes les entrées.

Dans src/theme/font-awesome/_mixins.scss, ajoutez la fonction suivante:

// src/theme/font-awesome/_mixins.scss
// ...

// Make an ionic icon

@mixin fa-ionic-icon($name, $val) {
  .#{$fa-css-prefix}-#{$name}:before ,
  .ion-ios-#{$fa-css-prefix}-#{$name}:before ,
  .ion-ios-#{$fa-css-prefix}-#{$name}-outline:before ,
  .ion-md-#{$fa-css-prefix}-#{$name}:before ,
  .ion-md-#{$fa-css-prefix}-#{$name}-outline:before  {
    content: $val;
  }
}

Dans src/theme/font-awesome/_icons.scss, il faut remplacer .#{$fa-css-prefix}-glass:before { content: $fa-var-glass; } par @include fa-ionic-icon(glass, $fa-var-glass); et faire de même pour toutes les occurences...

Comment vais-je faire pour effectuer cette opération à la main ?!
Ne vous inquiétez pas, vous pouvez automatiser cette tache avec des expressions régulières.

Avec NotePadd++ par exemple:

Remplacez cette occurence .#\{\$fa-css-prefix\}-([a-zA-Z0-9-]*):before \{ content: \$([a-zA-Z0-9-]*)\; \} par @include fa-ionic-icon$$1, \$$2$; pour tous les éléments.
Remplacez de nouveau .#\{\$fa-css-prefix\}-([a-zA-Z0-9-]*):before,\n@include fa-ionic-icon$([a-zA-Z0-9-]*), \$([a-zA-Z0-9-]*)$; par @include fa-ionic-icon$$1, \$$3$;\n@include fa-ionic-icon$$2, \$$3$; pour tous les éléments. N'hésitez pas à répéter cette opération.

Voilà, nous avons configuré le style pour une intégration mais ce n'est pas encore fini...

Vous pouvez le constater au travers de cet aperçu:
Icônes Ionic

Dernière configuration!

Pour afficher les icônes de Font Awesome, il faut définir la famille de police utilisée.

Pour l'intégrer automatiquement à toutes les icônes, sans surcharger par une classe (fa par exemple), nous allons modifier la mixin fa-ionic-icon:

// src/theme/font-awesome/_mixins.scss
// ...

// Make an ionic icon

@mixin fa-ionic-icon($name, $val) {
  .#{$fa-css-prefix}-#{$name}:before ,
  .ion-ios-#{$fa-css-prefix}-#{$name}:before ,
  .ion-ios-#{$fa-css-prefix}-#{$name}-outline:before ,
  .ion-md-#{$fa-css-prefix}-#{$name}:before ,
  .ion-md-#{$fa-css-prefix}-#{$name}-outline:before  {
    content: $val;
    font-family: FontAwesome;
  }
}

Voici donc le résultat final:
Icônes Ionic et Font Awesome