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 +
+ + Zoom aniamtion +
+``` -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. diff --git a/package/src/replace.js b/package/src/replace.js index 510054a..16ec92a 100644 --- a/package/src/replace.js +++ b/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;