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.
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í.
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.
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í.
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.
Por ejemplo, para agregar el icono llamado alert-circle se hace lo siguiente:
<i data-eva="alert-circle>
Adicionalmente hay otras opciones:
Todas esas opciones pueden combinarse dependiendo de la necesidad.
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();
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í.
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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.