8
votes

Icônes personnalisées avec Ionic 5?

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

Dans Ionic 4, il était possible d'ajouter des icônes personnalisées comme celle-ci: https://medium.com/@JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148

Ajoutez par exemple ios-my-custom-icon.svg et md-my-custom-icon.svg dans un dossier d' icônes dans les actifs . Ensuite, il a fallu les référencer dans le angular.json comme:

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

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. Est-ce que quelqu'un sait, 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

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

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-framework ionic4 ionic5

2 commentaires

Ayant exactement le même problème, cela fonctionnait avec Ionic 4, également le problème avec l'utilisation de l'attribut "src" est que les icônes n'apparaîtront pas sur la version IoS de l'application dans mon cas.

Exerlol avez-vous fait une URL absolue commençant par / ?

4 Réponses :

3
votes

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

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

Et dans le balisage:

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

0 commentaires

3
votes

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

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

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

À votre santé

MISE À JOUR

J'ai dû remettre le md- sur le nom de l'icône et en fait ajouter 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>

3 commentaires

Vous avez raison, cela fonctionne maintenant. Ils ont dû le changer dans une version ionique plus récente, car j'ai essayé la même chose avant et ce n'est pas le cas. Nous devons supprimer le .svg pour le faire fonctionner. Vous pouvez peut-être modifier cela dans votre réponse. Merci mon pote.

Salut Chris, je suis content que cela a fonctionné pour vous ... le mien fonctionne toujours avec le .svg, donc je ne suis pas sûr de ce qui se passe, je garderai un œil dessus, merci pour le conseil. À votre santé!

J'ai fait la même chose mais il est indiqué que le fichier est introuvable. Pouvez-vous mentionner où vous avez supprimé le .svg?

1
votes

dans Angular.json:

 {"glob": "**/*",
  "input": "src/assets",
  "output": "assets"},
 {"glob": "**/*.svg",
  "input": "node_modules/ionicons/dist/ionicons/svg",
  "output": "./svg"},
 {"glob": "**/custom-*.svg",
  "input": "src/assets/icon_custom",
  "output": "./svg"}]```

and now start your custom svg icons whith "custom-..." in icon_custom (for example) folder.

0 commentaires

0
votes

Pour quelqu'un qui utilise un type impressionnant de polices d'icônes, vous pouvez simplement utiliser class="fa icon" . Par exemple:

<ion-icon class="custom-icon icon-edit"></ion-icon>

ou si vous utilisez votre propre jeu d'icônes, vous pouvez utiliser quelque chose comme:

<ion-tab-button tab="tab1">
  <ion-icon class="fa icon"></ion-icon>
  <ion-label >Inbox</ion-label>
</ion-tab-button>

2 commentaires

Vous n'utilisez pas class="fa icon" dans votre exemple ??

Merci pour la correction. J'ai créé mon propre jeu d'icônes nommé "my-icon" car font-awesome utilise "fa" .