Github url

eva-icons

by akveo

akveo /eva-icons

A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations ...

7.5K Stars 297 Forks Last release: 5 months ago (v1.1.3) MIT License 55 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Eva Icons

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

CDN

Load from CDN in your project:

html<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:

html<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-eva
    attribute with the icon name to an element:
  • Call
    eva.replace();
    to replace all elements with the
    data-eva
    data attribute with SVG elements. You can also pass some additional parameters to the
    replace
    method to modify the
    replace
    function behavior.
<title></title><script src="https://unpkg.com/eva-icons"></script><script>
      eva.replace()
    </script>

Thanks to Feather Icons for the build process inspiration.

  • Additional attributes:

    data-eva-fill

    : set icon color

    data-eva-height

    : set icon height

    data-eva-width

    : set icon width

    data-eva-animation
    : set icon animation

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
    eva
    and
    eva-icon
    classes to an element:

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-animation
    attribute with the animation type
    (zoom, pulse, shake and flip)
    to an element:
  • Additional animation attributes:

    data-eva-hover
    : Makes the animation available on hover. Default value is
    true

    . Available true or false.

    data-eva-infinite
    : Makes the animation infinite. Default value is
    false
    . Available true or false.

Note: In the above example

github icon

will be always animated. This type of animation will be applied only to current icons.

  • Pass animation as property in a
    eva.replace
    method.
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-hover
    class to the parent container in a case you want to activate the animation hovering on the parent element.
Zoom animation

3rd party implementations

License

MIT license.

More from Akveo

  • Nebular - Angular Components, Auth and Security
  • ngx-admin - the best Angular admin template

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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.