Eva Icons: un paquete de iconos open source para la web o para descargar

Publicado por parzibyte en

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

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.

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

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.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: