Ajouter une icône personnalisée dans Ionic 2

Question

J'utilise Ionic 2 pour développer mon application. Je veux utiliser mes icônes personnalisées dans mon application comme nous utilisons les icônes de Ionic 2. étiquette. Par exemple :

<ion-icon name="my-custom-icon"></ion-icon>

Comment puis-je y parvenir ? Existe-t-il une méthode recommandée pour y parvenir ?

Answer 1

Voici la méthode la plus simple que j'ai trouvée sur les forums à l'adresse suivante https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36 .

Dans votre app.scss ajoutez le code suivant :

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="appname-customicon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

Ensuite, dans vos modèles, vous pouvez utiliser le HTML suivant pour créer l'icône :

<ion-icon name="appname-customicon"></ion-icon>

C'est beaucoup moins compliqué que d'utiliser les méthodes basées sur les polices. Tant que vous n'ajoutez pas des centaines d'icônes, cette méthode devrait vous convenir. Cependant, chaque image est envoyée sous forme de requête distincte, alors qu'avec les méthodes basées sur les polices, toutes les images sont contenues dans un seul fichier, ce qui est un peu plus efficace.

Answer 2

Si vous voulez utiliser des polices personnalisées dans ionic 2 vous pouvez le faire avec ce qui suit.

Étape 01 :

• Avoir/créer des fichiers SVG de polices personnalisées en utilisant des outils tels que XD .
• Accéder à un outil en ligne génial https://icomoon.io pour générer des icônes de police à partir de vos fichiers SVG. C'est un outil gratuit et très bon, je l'utilise depuis un certain temps.
• Téléchargez votre fichier de police personnalisé.

• Votre fichier ressemblera à ce qui suit.

  [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; }

remplacer le code ci-dessus par :

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
  @extend .ion;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

Étape 02 :

• Nous pouvons utiliser SASS @mixing pour les travaux répétitifs.

  @mixin makeIcon($arg, $val) { .ion-ios-#{$arg}:before , .ion-ios-#{$arg}-circle:before , .ion-ios-#{$arg}-circle-outline:before , .ion-ios-#{$arg}-outline:before , .ion-md-#{$arg}:before , .ion-md-#{$arg}-circle:before , .ion-md-#{$arg}-circle-outline:before , .ion-md-#{$arg}-outline:before { content: $val; font-size: 26px; } }

nous pouvons utiliser notre mélange sass dans notre fichier sass comme :

@include makeIcon(icon-new-home, '\e911')

Étape 03

Utilisez-le comme

<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
 </ion-tabs>

et il supporte même l'effet d'ondulation d'Android, ce qui est plutôt cool.

Mis à jour le 30 novembre 2017

@ionic/app-scripts : 3.1.2
Ionic Framework    : ionic-angular 3.9.2

Pour Ionic 3.1.2

Vous devez ajouter @import "ionicons"; à l'intérieur de votre /src/theme/variables.scss qui corrigera l'erreur suivante

"[class^="icon-"]" failed to @extend ".ion". The selector ".ion" was not found. Use "@extend .ion !optional" 
        if the extend should be able to fail.

Answer 3

Avec la version actuelle de Ionic 3.3.0, vous pouvez utiliser la solution d'Anjum, mais vous devez modifier les éléments suivants

@import "ionic.ionicons";

à

@import "ionicons";

dans le fichier src/theme/variables.scss.

J'ai trouvé cette solution à l'adresse suivante

https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss

Answer 4

J'ai essayé de mettre en œuvre Anjum Nawab shaikh. réponse sur le dessus avec la feuille sass des icônes d'icomoon.

J'ai réussi à le faire fonctionner avec la version 2.2.2.

Dans le www/fontes du projet, j'avais ajouté les fichiers icomoon :

icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss

Dans icomoon.scss j'ai ajouté le scss suivant :

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tclihz');
  src:  url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tclihz') format('truetype'),
    url('../fonts/icomoon.woff?tclihz') format('woff'),
    url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{

/* Didn't feel the need to @extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in 
www/assets/fonts/ionicons.scss */

  font-family: "Ionicons", "icomoon" !important; //So just add this
}

//Mixin
@mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    //important to overwrite ionic icons with your own icons
    content: $val !important; 
    font-size: 26px;
  }
}

//Adding Icons
@include makeIcon(email, '\e900');
...

Puis j'ai fait un import vers le fichier variables.scss

@import "../www/fonts/icomoon";

Maintenant nous pouvons ajouter ceci au modèle html :

<ion-icon name="email"></ion-icon>

Answer 5

Avant de commencer : assurez-vous que vous disposez de tous les fichiers svg dont vous avez besoin.

Maintenant, il suffit d'aller ici : http://fontello.com/

Cet outil générera la police de votre icône et le CSS nécessaire avec. C'est assez intuitif, il suffit de l'utiliser, de télécharger et de copier votre police où vous voulez dans votre dossier www mais conserver la même structure de fichiers . Pour finir, il suffit d'intégrer votre fichier CSS dans votre index.html et le tour est joué !

J'espère que cela résoudra votre problème ! ;-)