web-dev-qa-db-fra.com

Ajouter une icône personnalisée dans Ionic 2

J'utilise Ionic 2 pour développer mon application. Je souhaite utiliser mes icônes personnalisées dans mon application, comme nous utilisons les icônes ioniques 2 à l'aide detag. Par exemple:

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

Comment puis-je atteindre cet objectif? Y a-t-il un moyen recommandé de faire cela?

ionic-frameworkionic2
53
Prerak Tiwari

Si vous souhaitez utiliser des polices personnalisées dans ionic 2+, vous pouvez le faire avec les options suivantes.

Etape 01:

  • Créez/créez des fichiers SVG de polices personnalisés à l'aide d'outils tels que XD .
  • Accédez à l’outil génial en ligne 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 moment.
  • Téléchargez votre fichier de police personnalisé.
  • Votre fichier ressemblera à quelque chose ci-dessous.
[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;
}

remplace 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 le travail répétitif 
  @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 mixage 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 son même soutien effet d'entraînement Android, qui a l'air plutôt cool 

[Mise à jour] 30 nov. 2017

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

Pour Ionic 3.1.2

Vous devez ajouter @import "ionicons"; dans votre fichier /src/theme/variables.scss pour corriger l'erreur ci-dessous.

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

C’est le moyen le plus simple que j’ai trouvé, sur les forums de https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/ 46131/36 .

Dans votre fichier 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 code 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 en tant que demande distincte, où, comme pour les méthodes de police de caractères, toutes les images sont contenues dans un seul fichier, ce qui rendrait un peu plus efficace.

68
adjwilli

Avec la version actuelle d’Ionic 3.3.0, vous pouvez utiliser la solution d’Anjum, mais vous devez changer

@import "ionic.ionicons";

à

@import "ionicons";

dans le fichier src/theme/variables.scss.

Trouvé cette solution à:

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

9
Wolf

J'essaie d'implémenter Anjum Nawab Shaikh réponse sur le dessus avec la feuille de sass icones d'icomoon.

J'ai pu le faire fonctionner avec la version 2.2.2.

Dans le www/fonts 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');
...

Ensuite, j'ai importé le fichier variables.scss.

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

Nous pouvons maintenant ajouter ceci au modèle html:

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

Avant de commencer _: assurez-vous de disposer de tous les fichiers svg dont vous avez besoin.

Maintenant, allez simplement ici: http://fontello.com/

Cet outil va générer votre police d'icônes et le CSS nécessaire avec. C'est assez intuitif, utilisez-le, téléchargez et copiez votre police où vous voulez dans votre dossier www mais conservez la même structure de fichier}. Pour finir, intégrez votre fichier CSS dans votre fichier index.html et vous avez terminé!

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

4
Guillaume Le Mière

Selon l'équipe ionique:

Hé là-bas! Pour le moment, il est limité à l’utilisation d’ionicons, car il représente un icone ionique et gère les différences de plate-forme. Vous pouvez ouvrir un problème et nous pourrions discuter de l'ajout de cette fonctionnalité ici

Vous pouvez voir toutes les réponses ici:

https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16

Je trouve aussi ceci:

https://www.npmjs.com/package/ionic2-custom-icons ,

mais ne semble pas une solution intelligente (je préfère attendre une solution de l'équipe Ionic).

Le meilleur scénario pour cela est d'utiliser l'ancienne méthode, en créant une classe sur un fichier scss.

4
Goldbones

Pour ajouter des icônes personnalisées que j'utilise dans mon fichier scss:

.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
  @extend .ion;
}

.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
  content: 'your-custom-image';
}

Puis dans votre code HTML:

<ion-icon name="MYICON"></ion-icon>
3
rpayanm

Je pense que cette étape par étape de GerritErpenstein est très intuitive, cela fonctionne très bien pour moi. Ma version ionique est la 2.2.2. Littéralement, vous utilisez une phrase comme celle-ci et c'est fait:

<custom-icon set="star" name="iconostar"></custom-icon>

https://github.com/GerritErpenstein/ionic2-custom-icons

1
Giannkas
Create Icon
ion-icon {
        &[class*="custom-"] {
          mask-size: contain;
          mask-position: 50% 50%;
          mask-repeat: no-repeat;
          background: currentColor;
          width: 0.8em;
          height: 0.8em;
        }

        &[class*="custom-rupee"] {
          color: yellow;
          mask-image: url(../../assets/Images/rupee.svg);
        }
        &[class*="custom-ballon"] {
          mask-image: url(../../assets/ballon.svg);
        }
        &[class*="custom-mouse"] {
          mask-image: url(../../assets/mouse.svg);
        }

      }
 And to use them
&lt;ion-icon name="custom-rupee"></ion-icon>
&lt;ion-icon name="custom-mouse"></ion-icon>
&lt;ion-icon name="custom-ballon"></ion-icon>
0
kuldeep kumar

Si la méthode ionique ne fonctionne pas pour vous, vous pouvez utiliser la méthode angulaire. Utilisez ce paquet: https://www.npmjs.com/package/angular-svg-icon . 

Exemple de code pour une utilisation ionique: 

<svg-icon src="/assets/icons/activity.svg"></svg-icon>

0
sanuj