Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://akveo.github.io/eva-icons/
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
https://akveo.github.io/eva-icons/
icon icon-font icon-pack icons
Last synced: 3 months ago
JSON representation
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
- Host: GitHub
- URL: https://akveo.github.io/eva-icons/
- Owner: akveo
- License: mit
- Created: 2018-10-30T18:36:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T01:54:54.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T03:44:54.004Z (9 months ago)
- Topics: icon, icon-font, icon-pack, icons
- Language: TypeScript
- Homepage: https://akveo.github.io/eva-icons/
- Size: 50.6 MB
- Stars: 8,568
- Watchers: 116
- Forks: 364
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-nextjs - Eva Icons - Eva Icons is a pack of over 480 beautifully crafted Open Source icons for common use. (Icons Library)
- design-heaven - Eva Icons - Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. (Design Resources / Icons)
- awesome-icons - Eva Icons - 480+ customizable icons for common actions and items, available in multiple vector formats. (SVG Icon Libraries)
README
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
- [Complete Eva Icons Package](https://akveo.github.io/eva-icons/eva-icons.zip)
- [NPM Package](https://www.npmjs.com/package/eva-icons)
- you also can download icons one by one in `PNG` and `SVG` formats from [Eva Icons Website](https://akveo.github.io/eva-icons/?utm_campaign=eva_icons%20-%20home%20-%20eva_icons%20github%20readme&utm_source=eva_icons&utm_medium=referral&utm_content=github_readme_download_eva_icons).
### CDN
Load from CDN in your project:
```html
```
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
```
- Or require the package (may vary depending on your build system):
```js
const eva = require('eva-icons');
```
```js
import * as eva from 'eva-icons';
```
## How to use
### JavaScript
- Add the `data-eva` attribute with the icon name to an element:
```html
```
- 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.
```html
eva.replace()
```
*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](#animation)
```html
```
### Fonts
Eva Icons are also available as a Web Font.
- Include the font css into your page:
```html
```
- Add `eva` and `eva-icon` classes to an element:
```html
```
We recommend using SVG icons due to better rendering and performance capabilities, [more details](https://css-tricks.com/icon-fonts-vs-svg/).
## 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) |
### Animation
- Add the `data-eva-animation` attribute with the animation type `(zoom, pulse, shake and flip)` to an element:
```html
```
- 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.
```html
```
> **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.
```js
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.
```html
Zoom animation
```
## 3rd party implementations
- [React Native](https://github.com/artyorsh/react-native-eva-icons)
- [Flutter](https://github.com/piyushmaurya23/eva_icons_flutter)
## License
[MIT](LICENSE.txt) license.
## More from Akveo
- [Nebular](https://github.com/akveo/nebular) - Angular Components, Auth and Security
- [ngx-admin](https://github.com/akveo/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](https://twitter.com/akveo_inc) :feet:
- Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:
## From Developers
Made with :heart: by [Akveo team](https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20github%20readme&utm_source=eva_icons&utm_medium=referral&utm_content=readme_made_with_heart). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
We're always happy to receive your feedback!