akveo/eva-icons
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
| repo name | akveo/eva-icons |
| repo link | https://github.com/akveo/eva-icons |
| homepage | https://akveo.github.io/eva-icons/ |
| language | TypeScript |
| size (curr.) | 52699 kB |
| stars (curr.) | 7209 |
| created | 2018-10-30 |
| license | MIT License |
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4 animation types: zoom, pulse, shake and flip. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: Fill and Outline and in several formats, including PNG, SVG, font, Sketch, etc.
Download
- Complete Eva Icons Package
- NPM Package
- you also can download icons one by one in
PNGandSVGformats from Eva Icons Website.
CDN
Load from CDN in your project:
<script src="https://unpkg.com/eva-icons"></script>
After including the script, eva will be available as a global variable.
NPM
- Install the package:
npm i eva-icons
- Include it to your page:
<script src="path/to/dist/eva-icons.js"></script>
- Or require the package (may vary depending on your build system):
const eva = require('eva-icons');
import * as eva from 'eva-icons';
How to use
JavaScript
- Add the
data-evaattribute with the icon name to an element:
<i data-eva="github"></i>
- Call
eva.replace();to replace all elements with thedata-evadata attribute with SVG elements. You can also pass some additional parameters to thereplacemethod to modify thereplacefunction behavior.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/eva-icons"></script>
<body>
<i data-eva="github"></i>
<script>
eva.replace()
</script>
</body>
</html>
Thanks to Feather Icons for the build process inspiration.
- Additional attributes:
data-eva-fill: set icon colordata-eva-height: set icon heightdata-eva-width: set icon widthdata-eva-animation: set icon animation
<i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>
Fonts
Eva Icons are also available as a Web Font.
- Include the font css into your page:
<link href="path/to/style/eva-icons.css">
- Add
evaandeva-iconclasses to an element:
<i class="eva eva-github"></i>
We recommend using SVG icons due to better rendering and performance capabilities, more details.
Documentation
eva.replace(options)
Replaces all elements that have a data-eva attribute with SVG markup.
options optional object.
Available ‘option’ properties:
| Name | Type | Default value | Description |
|---|---|---|---|
| fill | string | none | Icon color |
| width | string or number | 24px | Icon width |
| height | string or number | 24px | Icon height |
| class | string | none | Custom css class |
| animation | object | none | Icon animation |
Animation
- Add the
data-eva-animationattribute with the animation type(zoom, pulse, shake and flip)to an element:
<i data-eva="github" data-eva-animation="zoom"></i>
- Additional animation attributes:
data-eva-hover: Makes the animation available on hover. Default value istrue. Available true or false.data-eva-infinite: Makes the animation infinite. Default value isfalse. Available true or false.
<i data-eva="github" data-eva-animation="zoom" data-eva-hover="false" data-eva-infinite="true"></i>
Note: In the above example
github iconwill be always animated. This type of animation will be applied only to current icons.
- Pass animation as property in a
eva.replacemethod.
eva.replace({
animation: {
type: string, // zoom, pulse, shake, flip
hover: boolean, // default true
infinite: boolean, // default false
}
});
Note: The animation will be applied to all replaced elements.
- Add
eva-parent-hoverclass to the parent container in a case you want to activate the animation hovering on the parent element.
<div class="eva-parent-hover">
<i data-eva="github" data-eva-animation="zoom"></i>
Zoom animation
</div>
3rd party implementations
License
MIT license.
More from Akveo
How can I support the developers?
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on Twitter :feet:
- Like our page on Facebook :thumbsup:
From Developers
Made with :heart: by Akveo team. Follow us on Twitter to get the latest news first! We’re always happy to receive your feedback!
