1.0.1 • Published 5 years ago
react-svg-drawing v1.0.1
React SVG Drawing
React SVG Drawing helps you to easily create a SVG drawing animation in your ReactJS app. All you need to do is put your svg inside DrawSVG tag.
First Step:
npm install react-svg-drawing --saveSecond Step:
import DrawSVG from 'react-svg-drawing'Third Step:
<DrawSVG>
Your SVG code here
</DrawSVG>##Example
import DrawSVG from 'react-svg-drawing';
<DrawSVG strokeWidth="0.5" loop={true}>
<svg viewBox="0 0 60 60">
<path d="M22.404,21.173c2.126,0,3.895-1.724,3.895-3.85V3.849C26.299,1.724,24.53,0,22.404,0c-2.126,0-3.895,1.724-3.895,3.849
v13.475C18.51,19.449,20.278,21.173,22.404,21.173z"/>
<path d="M30.727,3.33c-0.481-0.2-1.03-0.147-1.466,0.142c-0.434,0.289-0.695,0.776-0.695,1.298v5.113
c0,0.56,0.301,1.076,0.784,1.354c4.192,2.407,6.918,6.884,6.918,11.999c0,7.654-6.217,13.882-13.87,13.882
c-7.654,0-13.86-6.228-13.86-13.882c0-5.113,2.813-9.589,6.931-11.997c0.478-0.279,0.773-0.794,0.773-1.348V4.769
c0-0.521-0.261-1.009-0.695-1.298c-0.435-0.29-0.984-0.342-1.466-0.142C6.257,6.593,0.845,14.276,0.845,23.236
c0,11.92,9.653,21.58,21.572,21.58c11.917,0,21.555-9.66,21.555-21.58C43.971,14.276,38.554,6.593,30.727,3.33z"/>
</svg>
</DrawSVG>Props
| Name | Type | Default | Description |
|---|---|---|---|
| easing | string | easeInOutElastic | Animation Timing function easeInOutElastic, easeInQuad, easeInQuart, easeInSine, easeInExpo, easeInCirc, easeInBack, easeInElastic, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutBack, easeOutElastic, easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInCubic, easeInQuart, easeInQuint, |
| duration | number | 2000 | Duration for the animation to work. |
| delay | number, function | function(el, i) { return i * 250 } | Set the time to delay the svg animation. |
| loop | bool | false | Set true for continuous animation |
| targets | string | 'svg path' | Set target of the animation. It can be anything like class, tag or id. |
| width | number, string | 200 | Set the width of your svg. |
| fill | string | 'none' | Set the color of your SVG. Note: Setting this will stop your animation to work. |
| stroke | string | '#000' | Set the stroke color of your svg. |
| strokeWidth | string, number | 1 | Set the stroke width of your svg. |
| SVGClass | string | 'react-svg-drawing' | Set the class for the SVG |