Icon.vue

Nico Prat
Nico Prat
Feb 20, 2019 · 3 min read
Icon from Iconmonstr

Aujourd’hui le but du jeu est d’avoir un composant Vue à la fois flexible et complet pour charger des icônes en SVG :

  • Simplifie l’ajout de nouvelles icônes
  • Ne crée pas de requête HTTP supplémentaires
  • Optimise le code SVG
  • Conserve la flexibilité des composants Vue
  • S’adapte visuellement au contexte

👉 Voici un dépôt d’exemple créé avec Vue CLI : https://github.com/nicooprat/icon.vue

La première étape consiste à ajouter un loader Webpack qui permet d’importer des SVG et de les traiter comme des composants Vue avec le plugin vue-svg-loader(documentation), permettant aussi d’optimiser le code au passage.

Attention toutefois aux options de SVGO par défaut, notamment la suppression de l’attribut viewbox qui peut poser des problèmes en terme de responsive par exemple.

Une fois installé il suffit de configurer vue.config.js :

Grâce au plugin babel-plugin-wildcard(documentation) l’import des icônes se fait simplement de cette manière :

Si ESlint n’apprécie pas, vous pouvez précéder l’import de cette ligne :

Il suffira par la suite d’ajouter des fichiers SVG dans ce dossier. Ce plugin Webpack peut poser des problèmes de mise en cache, le plus simple est donc d’ajouter ce script au package.json à utiliser en cas de problème :

On peut ensuite inclure dynamiquement le code SVG de l’icône demandée :

Et appeler notre icône ailleurs dans l’app de cette façon :

Bien sûr il est toujours possible, comme n’importe quel composant Vue, de transmettre (et potentiellement de surcharger) des attributs :

Il peut être utile d’ajouter ce style pour que l’icône soit de la même couleur que le texte courant (bien penser à l’attribut scoped) :

On peut aussi ajouter la propriété install à notre composant Icon pour l’instancier globalement plus facilement :

Il ne reste qu’à ajouter à notre main.js :

Updates

  1. On peut aussi ajouter un validator pour la prop du component : commit
  2. J’ai fini par préfixer les icônes par icon- pour éviter les conflits avec les éléments HTML existants : commit, référence

nicooprat

Myself

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store