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

Les icônes Web deviennent rapidement la norme pour la conception Web moderne. Ils sont des atouts énormes pour les concepteurs Web comme ceux-ci les icônes peuvent être personnalisées via CSS et redimensionné sans perte de qualité.

Cependant, certains packs d'icônes peuvent sembler gonflés et trop volumineux pour les sites de petite taille. C'est là que brille vraiment les géomicons.

C'est un pack d'icônes personnalisé codé à la main fonctionnant sur SVG. Vous pouvez intégrer les icônes via des scripts JS ou sous forme de fichiers SVG directs dans votre page. De toute façon, ils sont beaux vecteurs et super facile à relooker.

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

Mais leurs informations de configuration font certainement défaut sur la page de démonstration. Si vous voulez savoir comment configurer cela, vous devez vous rendre sur le dépôt GitHub pour obtenir des instructions..

Par défaut, cela la bibliothèque suppose que vous travaillez avec CSS / JS d'avoir ces icônes directement intégrées aux é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 au format HTML..

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

Ajoutez simplement le geomicons.min.js script dans votre en-tête et passez le icône de données attribut en éléments HTML. Celles-ci intégreront automatiquement des icônes que vous pourrez ensuite manipuler à l'aide de classes CSS.

Une autre chose que j’aime vraiment chez Geomicons est le support de Node. Voici un extrait de code du dépôt GitHub:

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

Si vous n'êtes pas familier avec Node, vous n'aurez probablement jamais besoin d'utiliser aucun de ses extraits. Il en va de même pour la version React.js de ces icônes.

Avoir toujours du soutien pour les principaux cadres est un gros problème. C’est plus la preuve que les Géomicons sont destinés à supporte tout type de site internet en mettant l'accent sur la performance d'abord.

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

Il y a aussi un ensemble d'icônes de contour appelé Geomicons Wired que vous voudrez peut-être aussi tester.

De toute façon, ceci est un iconset brillant pour les concepteurs web minimalistes. Un choix parfait pour optimiser votre site avec de belles icônes tout en réduisant le temps total de chargement des pages.