web-dev-qa-db-fra.com

Icônes personnalisées avec Ionic 5?

J'ai récemment mis à jour de Ionic 4 à Ionic 5. Avec Ionic 5) les icônes ont également reçu une mise à jour. Apparemment cependant aussi le mécanisme de chargement des icônes a changé.

Dans Ionic 4, il était possible d'ajouter des icônes personnalisées comme ceci: https: // medium. com/@ JordanBenge/comment-créer-custom-ionic-4-icons-af80cc6cc148

Ajouter par exemple ios-mon-icône-personnalisée.svg et md-my-custom-icon.svg dans un dossier icon dans le assets . Ensuite, il a fallu les référencer dans le angular.json comme:

 ...
   "assets": [
          ...
          {
            "glob": "**/*.svg",
            "input": "src/assets/icon",
            "output": "./svg"
          },
          ...
   ]
...

et on pourrait enfin les appeler comme les autres icônes ioniques en html:

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

Cependant, cela ne fonctionne plus dans ionic 5. Quelqu'un sait-il, comment nous pouvons maintenant implémenter des icônes personnalisées dans ionic 5?

[~ # ~] edit [~ # ~] : J'ai réalisé qu'il est toujours possible de les appeler via l'attribut src comme

<ion-icon src="assets/icon/md-my-custom-icon.svg"></ion-icon>

Cependant, ce n'est pas pratique comme utiliser l'attribut name. Y a-t-il une chance que nous ayons un équivalent à ce qui précède?

ionic-frameworkionic4ionic5
5
Chris

Vous devez supprimer le md- du nom de l'icône.

Par exemple, votre icône est md-my-custom-icon.svg

Changer en my-custom-icon.svg. Après cela, les icônes personnalisées fonctionneront à nouveau sur ionic 5

À votre santé

MISE À JOUR

J'ai dû mettre le md- revenir sur le nom de l'icône et ajouter réellement le md- à la balise d'icône ionique comme ci-dessous. De cette façon, il utilise mon icône personnalisée et non celle par défaut.

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

1
Telma C.

Vous pouvez toujours utiliser simplement [] puis fournissez une variable si vous préférez:

const myCustomIcon = "/assets/icons/custom.svg";

Et dans le balisage:

<ion-icon [src]="myCustomIcon"></ion-icon>
1
rtpHarry