Hoy vengo a presentar un paquete de iconos totalmente open source y descargable (no es mío) llamado Eva Icons. Son unos iconos que se pueden usar en la web, o como PNG y SVG en distintos proyectos.
Gracias a que son unos iconos open source y descargables, podemos usarlos como PNG o en la web para nuestro siguiente proyecto.
En este post voy a explicar cómo descargar los iconos y cómo usarlos en la web.
Eva icons: iconos open source
Estos bien podrían ser una alternativa a FontAwesome o a los Material Icons.
Quiero dejar en claro que no tengo relación con los iconos, ni vengo a promocionarlos porque alguien me lo haya dicho.
La página oficial de Eva Icons es esta. Su ejemplo de uso para la web está aquí y el repositorio de GitHub aquí.
Descargar iconos
Si quieres usarlos para tus diseños como imágenes PNG descárgalos desde este enlace del repositorio oficial. Una vez descargados extrae el zip y dentro vas a encontrar la carpeta con iconos.
La carpeta que dice fill es en donde los iconos están rellenos, y outline en donde solamente tienen el contorno. Cada carpeta tiene una de PNG o SVG.
Después de eso puedes colorear cada icono o modificarlo a u gusto.
Usar en la web
Aquí hay dos maneras. Ya sea con JavaScript o con CSS, se supone que es mejor con JavaScript y SVG en cuanto a rendimiento así que eso es lo que haremos.
La lista de iconos está aquí.
Importación del script
Importamos el script ubicado en https://unpkg.com/eva-icons@1.1.1/eva.min.js y luego declaramos un elemento <i> con el atributo data-eva especificando el icono.
Declarar iconos y algunas opciones
Por ejemplo, para agregar el icono llamado alert-circle se hace lo siguiente:
<i data-eva="alert-circle>
Adicionalmente hay otras opciones:
- data-eva-fill: el color del icono
- data-eva-width y data-eva-height: la anchura y altura del icono en px, respectivamente
- data-eva-animation: una animación de los iconos. Puede ser zoom, shake, pulse o flip.
- data-eva-infinite: un booleano indicando si la animación es infinita o no
- data-eva-hover: un booleano indicando si la animación se hace en el hover
Todas esas opciones pueden combinarse dependiendo de la necesidad.
Remplazar iconos
Si solamente declaramos los iconos pero no llamamos al método de JavaScript que los remplaza, no se verán. Por ello es que al final hay que agregar un script que llame a eva.replace();
Código completo
Si no queda claro, aquí dejo un ejemplo:
En ese ejemplo traté de mostrar las posibles combinaciones. Si quieres ver el ejemplo en vivo haz click aquí.
Conclusiones
Este paquete de iconos me parece muy sencillo, fácil de implementar y totalmente personalizable. Cabe mencionar que también podemos llamar a eva.replace pasándole un objeto con algunas opciones (como color y tamaño) por defecto; todo ello lo encuentras en la página oficial.
Por cierto, aquí di un ejemplo sencillo pero podemos colorear los iconos, o cambiarlos del tamaño dependiendo del uso. De esta manera podemos crear interfaces agradables.
Si tienes dudas deja un comentario.
