diff --git a/README.md b/README.md index 77c9238..cf2aa43 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,16 @@ import * as eva from 'eva-icons'; ``` *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. @@ -86,9 +96,60 @@ We recommend using SVG icons due to better rendering and performance capabilitie ## Documentation -### `eva.replace({ ... })` +### `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({ + aniamtion: { + type: string, // zoom, pulse, shake, flip + hover: booleam, // 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 +