Skip to content

Instantly share code, notes, and snippets.

@parzibyte

parzibyte/index.html

Created January 28, 2019 22:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parzibyte/5275507a7fe7a8016e1d1e6a425d69f0 to your computer and use it in GitHub Desktop.
Save parzibyte/5275507a7fe7a8016e1d1e6a425d69f0 to your computer and use it in GitHub Desktop.
Download ZIP
Ejemplo de Eva icons created by parzibyte - https://repl.it/@parzibyte/Ejemplo-de-Eva-icons
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment