Geomicones - Un conjunto de iconos SVG codificado a mano único

Los conjuntos de iconos web se están convirtiendo rápidamente en la norma para el diseño web moderno. Son activos masivos para diseñadores web como estos. Los iconos se pueden personalizar a través de CSS y redimensionado sin ninguna pérdida de calidad..

Pero algunos paquetes de iconos pueden sentirse hinchados y demasiado grandes para sitios más pequeños. Ahí es donde realmente brilla Geomicons.

Esto es un paquete de iconos personalizados codificados a mano que se ejecutan en SVG. Puede incrustar los íconos a través de scripts JS, o como archivos SVG directos en su página. De cualquier manera, son vectores hermosos y súper fáciles de cambiar el estilo..

La página principal de Geomicons presenta una demostración completa de todos los iconos. Son bastante simples y siguen el estilo tradicional de diseño plano de un solo color con el que todos estamos familiarizados.

Pero su información de configuración carece ciertamente de la página de demostración. Si quieres aprender a configurar esto, deberás visitar el repositorio de GitHub para obtener instrucciones..

Por defecto, este la biblioteca asume que estás trabajando con CSS / JS tener estos iconos incrustados directamente en los elementos de la página. Sin embargo, cuando descarga los íconos de GitHub, obtiene todos los archivos SVG sin procesar que puede agregar directamente a HTML.

El único problema es que Los SVGs crudos requieren más edición para cambiar los colores, mientras que la ruta JS / CSS le da control sobre los colores a través del código.

Simplemente añada el geomicons.min.js guión en su encabezado y pasar el icono de datos atribuir en elementos HTML. Estos se incrustarán automáticamente los iconos que luego puede manipular usando clases de CSS.

Otra cosa que realmente me gusta de Geomicons es el soporte para Node. Aquí hay un fragmento de muestra del repositorio de GitHub:

var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Devuelve el valor del atributo d de la ruta var svgString = geomicons.toString ('heart'); // Devuelve una cadena SVG

Si no está familiarizado con Node, es probable que nunca necesite usar ninguno de los fragmentos de Node. Lo mismo ocurre con la versión React.js de estos iconos..

Todavía tener soporte para grandes marcos es un gran problema. Es una prueba más de que los Geomicones están destinados a Apoya cualquier tipo de sitio web. centrándose en el rendimiento primero.

Para realizar una prueba de funcionamiento de estos iconos, puede obtener una copia a través de npm o descargarlos directamente a través de GitHub.

También hay un conjunto de iconos de esquema llamado Geomicons Wired que quizás también quieras probar.

De cualquier manera, esto es un Brillante conjunto de iconos para diseñadores web minimalistas. La opción perfecta para optimizar su sitio con hermosos iconos mientras disminuye los tiempos totales de carga de la página.