docs(readme): update readMe, update replace method (#23)

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
+<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.
@@ -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
+<i data-eva="github" data-eva-animation="zoom"></i>
+```
+
+- 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
+<i data-eva="github" data-eva-animation="zoom" data-eva-hover="false" data-eva-infinite="true"></i>
+```
+
+> **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
+<div class="eva-parent-hover">
+  <i data-eva="github" data-eva-animation="zoom"></i>
+  Zoom aniamtion
+</div>
+```
 
-Replaces all elements that have a `data-eva` attribute with SVG markup corresponding to the element's `data-eva` attribute value.
 ## License
 [MIT](LICENSE.txt) license.
 

package/src/replace.js

@@ -20,7 +20,7 @@ const dataAttributesKeys = {
   'data-eva-fill': 'fill',
 };
 
-function replace(attrs = {}) {
+function replace(options = {}) {
   if (typeof document === 'undefined') {
     throw new Error('`eva.replace()` only works in a browser environment.');
   }
@@ -28,17 +28,18 @@ function replace(attrs = {}) {
   const elementsToReplace = document.querySelectorAll('[data-eva]');
 
   Array.from(elementsToReplace).forEach(element =>
-    replaceElement(element, attrs),
+    replaceElement(element, options),
   );
 }
 
-function replaceElement(element, attrs = {}) {
+function replaceElement(element, options = {}) {
   const { name, ...elementAttrs } = getAttrs(element);
 
   const svgString = icons[name].toSvg({
-    ...attrs,
+    ...options,
     ...elementAttrs,
-    ...{ class: classnames(attrs.class, elementAttrs.class) },
+    animation: getAnimationObject(options.animation, elementAttrs.animation),
+    ...{ class: classnames(options.class, elementAttrs.class) },
   });
   const svgDocument = new DOMParser().parseFromString(
     svgString,
@@ -69,14 +70,25 @@ function getAttrs(element) {
 
 function getAttr(attr) {
   if (!!dataAttributesKeys[attr.name]) {
-    return {
+    return ({
       [dataAttributesKeys[attr.name]]: attr.value,
-    };
-  } else {
-    return {
-      [attr.name]: attr.value,
-    };
+    });
   }
+
+  return ({
+    [attr.name]: attr.value,
+  });
+}
+
+function getAnimationObject(optionsAnimation, elementAttrsAnimation) {
+  if (optionsAnimation || elementAttrsAnimation) {
+    return ({
+      ...optionsAnimation,
+      ...elementAttrsAnimation,
+    });
+  }
+
+  return null;
 }
 
 export default replace;