web

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

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

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:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Demostración de uso de Eva Icons by @parzibyte</title>
 <!-- Incluir el script del JS -->
 <script src="https://unpkg.com/eva-icons@1.1.1/eva.min.js" type="text/javascript">

 </script>
</head>

<body>
 <div>
  <h1>Demostración de uso de Eva Icons</h1>
  By <a target="_blank" href="//parzibyte.me">Parzibyte</a>
  <br>
  Se utiliza el elemento <code>&lt;li&gt;</code> y se le pone el atributo <code>data-eva</code> que representa
  el icono deseado. En este caso es <em>alert-circle</em> por lo que es <code>&lt;li data-eva="alert-circle"&gt;</code>
  <br>
  <i data-eva="alert-circle"></i>
  <br>
  Para cambiar el tamaño se especifican los atributos <code>data-eva-height</code> y <code>data-eva-width</code>. Por defecto
  es 48 pero podemos cambiarlo a lo que sea; en este caso se cambia a 100 y queda:  <code>&lt;li data-eva-height="100" data-eva-width="100" data-eva="alert-circle"&gt;</code>
  <br>
  <i data-eva="alert-circle" data-eva-height="100" data-eva-width="100"></i>
  <br>
  El color viene especificado con el atributo <code>data-eva-fill</code>. En este caso se cambia a #8bc34a y queda:  <code>&lt;li data-eva-fill="#8bc34a" data-eva="alert-circle"&gt;</code>
  <br>
  <i data-eva="alert-circle" data-eva-fill="#8bc34a"></i>
  <br>
  Para alternar a outline se agrega outline al final del icono, por ejemplo: <code>&lt;li data-eva="alert-circle-outline"&gt;</code>
  <br>
  <i data-eva="alert-circle-outline"></i>
  <br>
  Para agregar una animación se especifica data-eva-animation (puede ser zoom, pulse, shake y flip) por ejemplo: <code>&lt;li data-eva-animation="zoom" data-eva="alert-circle-outline"&gt;</code>
  <br>
  Zoom: <i data-eva="alert-circle-outline" data-eva-animation="zoom"></i>
  <br>
  Pulse: <i data-eva="alert-circle-outline" data-eva-animation="pulse"></i>
  <br>
  Shake: <i data-eva="alert-circle-outline" data-eva-animation="shake"></i>
  <br>
  Flip: <i data-eva="alert-circle-outline" data-eva-animation="flip"></i>
  <br>
  Adicional a la animación, se puede especificar data-eva-hover para animar en el hover (por defecto es true)
  y también data-eva-infinite para que la animación sea infinita
   <br>
  Sin animación en hover: <i data-eva-hover="false" data-eva="alert-circle-outline" data-eva-animation="zoom"></i>
  <br>
  Sin animación en hover pero animación infinita: <i data-eva-infinite="true" data-eva-hover="false" data-eva="alert-circle-outline" data-eva-animation="zoom"></i>
  <br>
  Animación infinita en hover: <i data-eva-infinite="true" data-eva="alert-circle-outline" data-eva-animation="zoom"></i>
  </div>
  <script>
   // Llamar a eva.replace; si no, no se renderizarán los iconos
   eva.replace();
  </script>
  </body>
</html>

En ese ejemplo traté de mostrar las posibles combinaciones.

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

3 horas hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esta web usa cookies.