Geomicons - Un ensemble d'icônes unique SVG codés à la main

Web iconsets deviennent rapidement la norme pour la conception web moderne. Ce sont des atouts considérables pour les concepteurs Web, car ces icônes peuvent être personnalisées via CSS et redimensionnées sans aucune perte de qualité.

Mais certains packs d'icônes peuvent sembler gonflés et trop volumineux pour les sites plus petits. C'est là que Geomicons brille vraiment.

Ceci est un pack d'icônes personnalisé codé à la main qui s'exécute sur SVG . Vous pouvez intégrer les icônes à travers des scripts JS ou des fichiers SVG directement dans votre page. Quoi qu'il en soit, ils sont beaux vecteurs et super facile à relooker.

La page principale Geomicons présente une démo complète de toutes les icônes. Ils sont assez simples et suivent le style de design plat monochrome traditionnel que nous connaissons tous.

Mais leurs informations d'installation font certainement défaut sur la page de démonstration. Si vous voulez apprendre comment configurer cela, vous devrez visiter le dépôt GitHub pour obtenir des instructions.

Par défaut, cette bibliothèque suppose que vous travaillez avec CSS / JS pour que ces icônes soient directement intégrées dans les éléments de la page. Pourtant, lorsque vous téléchargez les icônes de GitHub, vous obtenez tous les fichiers SVG bruts que vous pouvez ajouter directement en HTML.

Le seul problème est que les SVG bruts nécessitent plus de modifications pour changer de couleur, alors que la route JS / CSS vous donne le contrôle sur les couleurs via le code.

Ajoutez simplement le script geomicons.min.js dans votre en-tête et transmettez l'attribut data-icon en éléments HTML. Ceux-ci vont auto-embed les icônes que vous pouvez ensuite manipuler en utilisant des classes CSS.

Une autre chose que j'aime vraiment chez Geomicons, c'est le support de Node. Voici un exemple de extrait du repo GitHub:

 var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Renvoie la valeur de l'attribut d du chemin var svgString = geomicons.toString ('heart'); // Renvoie une chaîne SVG 

Si vous n'êtes pas familier avec Node, vous n'aurez probablement jamais besoin d'utiliser les snippets de nœuds. Idem pour la version React.js de ces icônes.

Avoir toujours un soutien pour les grands cadres est une grosse affaire. C'est une preuve supplémentaire que les Geomicons sont conçus pour supporter n'importe quel type de site Web en se concentrant sur la performance en premier.

Pour tester ces icônes, vous pouvez en tirer une copie via npm ou les télécharger directement via GitHub.

Il y a aussi un jeu d'icônes de contour appelé Geomicons Wired que vous pourriez vouloir tester aussi bien.

De toute façon, c'est un ensemble d' icônes brillant pour les concepteurs web minimalistes . Un choix parfait pour optimiser votre site avec de belles icônes tout en diminuant le temps total de chargement des pages.