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.
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:
<!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><li></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><li data-eva="alert-circle"></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><li data-eva-height="100" data-eva-width="100" data-eva="alert-circle"></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><li data-eva-fill="#8bc34a" data-eva="alert-circle"></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><li data-eva="alert-circle-outline"></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><li data-eva-animation="zoom" data-eva="alert-circle-outline"></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.
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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.