svg-loaders-react - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/index.js

@@ -1,12 +0,1 @@
-module.exports=function(e){var n={};function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var i in e)t.d(r,i,function(n){return e[n]}.bind(null,i));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=18)}([function(e,n){e.exports=require("react")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},i=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}(),a=t(0),c=s(a),o=s(t(14)),l=s(t(17));function s(e){return e&&e.__esModule?e:{default:e}}var u={title:/<title>.*<\/title>/gi,desc:/<desc>.*<\/desc>/gi,comment:/<!--.*-->/gi,defs:/<defs>.*<\/defs>/gi,width:/ +width="\d+(\.\d+)?(px)?"/gi,height:/ +height="\d+(\.\d+)?(px)?"/gi,fill:/ +fill="(none|#[0-9a-f]+)"/gi,sketchMSShapeGroup:/ +sketch:type="MSShapeGroup"/gi,sketchMSPage:/ +sketch:type="MSPage"/gi,sketchMSLayerGroup:/ +sketch:type="MSLayerGroup"/gi},f=function(e){function n(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,a.Component),i(n,[{key:"render",value:function(){var e=this.props,t=e.className,i=e.component,a=e.svg,o=e.fill,s=e.width,f=e.accessibilityLabel,p=e.accessibilityDesc,d=e.classSuffix,g=e.cleanupExceptions,m=function(e,n){var t={};for(var r in e)n.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}(e,["className","component","svg","fill","width","accessibilityLabel","accessibilityDesc","classSuffix","cleanupExceptions"]),v=this.props,b=v.cleanup,h=v.height;(!0===b||0===b.length&&g.length>0)&&(b=Object.keys(u)),b=b.filter(function(e){return!(g.indexOf(e)>-1)}),s&&void 0===h&&(h=s),delete m.cleanup,delete m.height;var y,x,w,M=(0,l.default)((y={SVGInline:!0,"SVGInline--cleaned":b.length},w=t,(x=t)in y?Object.defineProperty(y,x,{value:w,enumerable:!0,configurable:!0,writable:!0}):y[x]=w,y)),O=M.split(" ").join(d+" ")+d,C=n.cleanupSvg(a,b).replace(/<svg/,'<svg class="'+O+'"'+(o?' fill="'+o+'"':"")+(s||h?' style="'+(s?"width: "+s+";":"")+(h?"height: "+h+";":"")+'"':"")),N=void 0;if(p){var j=(N=/<svg(.|\n|\r\n)*?>/.exec(C)).index+N[0].length;C=C.substr(0,j)+"<desc>"+p+"</desc>"+C.substr(j)}if(f){var k=(N=N||/<svg(.|\n|\r\n)*?>/.exec(C)).index+N[0].length-1,S="SVGInline-"+n.idCount+++"-title";C=C.substr(0,k)+' role="img" aria-labelledby="'+S+'"'+C.substr(k,1)+'<title id="'+S+'">'+f+"</title>"+C.substr(k+1)}return c.default.createElement(i,r({},m,{className:M,dangerouslySetInnerHTML:{__html:C}}))}}]),n}();f.propTypes={className:o.default.string,classSuffix:o.default.string,component:o.default.oneOfType([o.default.string,o.default.func]),svg:o.default.string.isRequired,fill:o.default.string,cleanup:o.default.oneOfType([o.default.bool,o.default.array]),cleanupExceptions:o.default.array,width:o.default.string,height:o.default.string,accessibilityLabel:o.default.string,accessibilityDesc:o.default.string},f.defaultProps={component:"span",classSuffix:"-svg",cleanup:[],cleanupExceptions:[]},f.idCount=0,f.cleanupSvg=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return Object.keys(u).filter(function(e){return n.indexOf(e)>-1}).reduce(function(e,n){return e.replace(u[n],"")},e).trim()},n.default=f},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#FFF">\n    <g transform="matrix(1 0 0 -1 0 80)">\n        <rect width="10" height="20" rx="3">\n            <animate attributeName="height"\n                 begin="0s" dur="4.3s"\n                 values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear"\n                 repeatCount="indefinite" />\n        </rect>\n        <rect x="15" width="10" height="80" rx="3">\n            <animate attributeName="height"\n                 begin="0s" dur="2s"\n                 values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear"\n                 repeatCount="indefinite" />\n        </rect>\n        <rect x="30" width="10" height="50" rx="3">\n            <animate attributeName="height"\n                 begin="0s" dur="1.4s"\n                 values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear"\n                 repeatCount="indefinite" />\n        </rect>\n        <rect x="45" width="10" height="30" rx="3">\n            <animate attributeName="height"\n                 begin="0s" dur="2s"\n                 values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear"\n                 repeatCount="indefinite" />\n        </rect>\n    </g>\n</svg>'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n\x3c!-- Todo: add easing --\x3e\n<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#fff">\n    <g fill="none" fill-rule="evenodd">\n        <g transform="translate(1 1)" stroke-width="2">\n            <circle cx="5" cy="50" r="5">\n                <animate attributeName="cy"\n                     begin="0s" dur="2.2s"\n                     values="50;5;50;50"\n                     calcMode="linear"\n                     repeatCount="indefinite" />\n                <animate attributeName="cx"\n                     begin="0s" dur="2.2s"\n                     values="5;27;49;5"\n                     calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="27" cy="5" r="5">\n                <animate attributeName="cy"\n                     begin="0s" dur="2.2s"\n                     from="5" to="5"\n                     values="5;50;50;5"\n                     calcMode="linear"\n                     repeatCount="indefinite" />\n                <animate attributeName="cx"\n                     begin="0s" dur="2.2s"\n                     from="27" to="27"\n                     values="27;49;5;27"\n                     calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="49" cy="50" r="5">\n                <animate attributeName="cy"\n                     begin="0s" dur="2.2s"\n                     values="50;50;5;50"\n                     calcMode="linear"\n                     repeatCount="indefinite" />\n                <animate attributeName="cx"\n                     from="49" to="49"\n                     begin="0s" dur="2.2s"\n                     values="49;5;27;49"\n                     calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n        </g>\n    </g>\n</svg>'},function(e,n){e.exports='<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">\n    <rect y="10" width="15" height="120" rx="6">\n        <animate attributeName="height"\n             begin="0.5s" dur="1s"\n             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"\n             repeatCount="indefinite" />\n        <animate attributeName="y"\n             begin="0.5s" dur="1s"\n             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"\n             repeatCount="indefinite" />\n    </rect>\n    <rect x="30" y="10" width="15" height="120" rx="6">\n        <animate attributeName="height"\n             begin="0.25s" dur="1s"\n             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"\n             repeatCount="indefinite" />\n        <animate attributeName="y"\n             begin="0.25s" dur="1s"\n             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"\n             repeatCount="indefinite" />\n    </rect>\n    <rect x="60" width="15" height="140" rx="6">\n        <animate attributeName="height"\n             begin="0s" dur="1s"\n             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"\n             repeatCount="indefinite" />\n        <animate attributeName="y"\n             begin="0s" dur="1s"\n             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"\n             repeatCount="indefinite" />\n    </rect>\n    <rect x="90" y="10" width="15" height="120" rx="6">\n        <animate attributeName="height"\n             begin="0.25s" dur="1s"\n             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"\n             repeatCount="indefinite" />\n        <animate attributeName="y"\n             begin="0.25s" dur="1s"\n             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"\n             repeatCount="indefinite" />\n    </rect>\n    <rect x="120" y="10" width="15" height="120" rx="6">\n        <animate attributeName="height"\n             begin="0.5s" dur="1s"\n             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"\n             repeatCount="indefinite" />\n        <animate attributeName="y"\n             begin="0.5s" dur="1s"\n             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"\n             repeatCount="indefinite" />\n    </rect>\n</svg>\n'},function(e,n){e.exports='<svg width="135" height="135" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#fff">\n    <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">\n        <animateTransform\n            attributeName="transform"\n            type="rotate"\n            from="0 67 67"\n            to="-360 67 67"\n            dur="2.5s"\n            repeatCount="indefinite"/>\n    </path>\n    <path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">\n        <animateTransform\n            attributeName="transform"\n            type="rotate"\n            from="0 67 67"\n            to="360 67 67"\n            dur="8s"\n            repeatCount="indefinite"/>\n    </path>\n</svg>\n'},function(e,n){e.exports='<svg width="105" height="105" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#fff">\n    <circle cx="12.5" cy="12.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="0s" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">\n        <animate attributeName="fill-opacity"\n         begin="100ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="52.5" cy="12.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="300ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="52.5" cy="52.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="600ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="92.5" cy="12.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="800ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="92.5" cy="52.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="400ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="12.5" cy="92.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="700ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="52.5" cy="92.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="500ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n    <circle cx="92.5" cy="92.5" r="12.5">\n        <animate attributeName="fill-opacity"\n         begin="200ms" dur="1s"\n         values="1;.2;1" calcMode="linear"\n         repeatCount="indefinite" />\n    </circle>\n</svg>\n'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg" fill="#fff">\n    <path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5">\n        <animate attributeName="fill-opacity"\n             begin="0s" dur="1.4s"\n             values="0.5;1;0.5"\n             calcMode="linear"\n             repeatCount="indefinite" />\n    </path>\n    <path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5">\n        <animate attributeName="fill-opacity"\n             begin="0.7s" dur="1.4s"\n             values="0.5;1;0.5"\n             calcMode="linear"\n             repeatCount="indefinite" />\n    </path>\n    <path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z" />\n</svg>\n'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">\n    <g fill="none" fill-rule="evenodd">\n        <g transform="translate(1 1)" stroke-width="2">\n            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>\n            <path d="M36 18c0-9.94-8.06-18-18-18">\n                <animateTransform\n                    attributeName="transform"\n                    type="rotate"\n                    from="0 18 18"\n                    to="360 18 18"\n                    dur="1s"\n                    repeatCount="indefinite"/>\n            </path>\n        </g>\n    </g>\n</svg>'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">\n    <g fill="none" fill-rule="evenodd" stroke-width="2">\n        <circle cx="22" cy="22" r="1">\n            <animate attributeName="r"\n                begin="0s" dur="1.8s"\n                values="1; 20"\n                calcMode="spline"\n                keyTimes="0; 1"\n                keySplines="0.165, 0.84, 0.44, 1"\n                repeatCount="indefinite" />\n            <animate attributeName="stroke-opacity"\n                begin="0s" dur="1.8s"\n                values="1; 0"\n                calcMode="spline"\n                keyTimes="0; 1"\n                keySplines="0.3, 0.61, 0.355, 1"\n                repeatCount="indefinite" />\n        </circle>\n        <circle cx="22" cy="22" r="1">\n            <animate attributeName="r"\n                begin="-0.9s" dur="1.8s"\n                values="1; 20"\n                calcMode="spline"\n                keyTimes="0; 1"\n                keySplines="0.165, 0.84, 0.44, 1"\n                repeatCount="indefinite" />\n            <animate attributeName="stroke-opacity"\n                begin="-0.9s" dur="1.8s"\n                values="1; 0"\n                calcMode="spline"\n                keyTimes="0; 1"\n                keySplines="0.3, 0.61, 0.355, 1"\n                repeatCount="indefinite" />\n        </circle>\n    </g>\n</svg>'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">\n    <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">\n        <circle cx="22" cy="22" r="6" stroke-opacity="0">\n            <animate attributeName="r"\n                 begin="1.5s" dur="3s"\n                 values="6;22"\n                 calcMode="linear"\n                 repeatCount="indefinite" />\n            <animate attributeName="stroke-opacity"\n                 begin="1.5s" dur="3s"\n                 values="1;0" calcMode="linear"\n                 repeatCount="indefinite" />\n            <animate attributeName="stroke-width"\n                 begin="1.5s" dur="3s"\n                 values="2;0" calcMode="linear"\n                 repeatCount="indefinite" />\n        </circle>\n        <circle cx="22" cy="22" r="6" stroke-opacity="0">\n            <animate attributeName="r"\n                 begin="3s" dur="3s"\n                 values="6;22"\n                 calcMode="linear"\n                 repeatCount="indefinite" />\n            <animate attributeName="stroke-opacity"\n                 begin="3s" dur="3s"\n                 values="1;0" calcMode="linear"\n                 repeatCount="indefinite" />\n            <animate attributeName="stroke-width"\n                 begin="3s" dur="3s"\n                 values="2;0" calcMode="linear"\n                 repeatCount="indefinite" />\n        </circle>\n        <circle cx="22" cy="22" r="8">\n            <animate attributeName="r"\n                 begin="0s" dur="1.5s"\n                 values="6;1;2;3;4;5;6"\n                 calcMode="linear"\n                 repeatCount="indefinite" />\n        </circle>\n    </g>\n</svg>'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">\n    <g fill="none" fill-rule="evenodd">\n        <g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">\n            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="1;0;0;0;0;0;0;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;1;0;0;0;0;0;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;0;1;0;0;0;0;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;0;0;1;0;0;0;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;0;0;0;1;0;0;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;0;0;0;0;1;0;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;0;0;0;0;0;1;0" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">\n                <animate attributeName="fill-opacity"\n                     begin="0s" dur="1.3s"\n                     values="0;0;0;0;0;0;0;1" calcMode="linear"\n                     repeatCount="indefinite" />\n            </circle>\n        </g>\n    </g>\n</svg>'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">\n    <defs>\n        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">\n            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>\n            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>\n            <stop stop-color="#fff" offset="100%"/>\n        </linearGradient>\n    </defs>\n    <g fill="none" fill-rule="evenodd">\n        <g transform="translate(1 1)">\n            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">\n                <animateTransform\n                    attributeName="transform"\n                    type="rotate"\n                    from="0 18 18"\n                    to="360 18 18"\n                    dur="0.9s"\n                    repeatCount="indefinite" />\n            </path>\n            <circle fill="#fff" cx="36" cy="18" r="1">\n                <animateTransform\n                    attributeName="transform"\n                    type="rotate"\n                    from="0 18 18"\n                    to="360 18 18"\n                    dur="0.9s"\n                    repeatCount="indefinite" />\n            </circle>\n        </g>\n    </g>\n</svg>\n'},function(e,n){e.exports='\x3c!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --\x3e\n<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">\n    <circle cx="15" cy="15" r="15">\n        <animate attributeName="r" from="15" to="15"\n                 begin="0s" dur="0.8s"\n                 values="15;9;15" calcMode="linear"\n                 repeatCount="indefinite" />\n        <animate attributeName="fill-opacity" from="1" to="1"\n                 begin="0s" dur="0.8s"\n                 values="1;.5;1" calcMode="linear"\n                 repeatCount="indefinite" />\n    </circle>\n    <circle cx="60" cy="15" r="9" fill-opacity="0.3">\n        <animate attributeName="r" from="9" to="9"\n                 begin="0s" dur="0.8s"\n                 values="9;15;9" calcMode="linear"\n                 repeatCount="indefinite" />\n        <animate attributeName="fill-opacity" from="0.5" to="0.5"\n                 begin="0s" dur="0.8s"\n                 values=".5;1;.5" calcMode="linear"\n                 repeatCount="indefinite" />\n    </circle>\n    <circle cx="105" cy="15" r="15">\n        <animate attributeName="r" from="15" to="15"\n                 begin="0s" dur="0.8s"\n                 values="15;9;15" calcMode="linear"\n                 repeatCount="indefinite" />\n        <animate attributeName="fill-opacity" from="1" to="1"\n                 begin="0s" dur="0.8s"\n                 values="1;.5;1" calcMode="linear"\n                 repeatCount="indefinite" />\n    </circle>\n</svg>\n'},function(e,n,t){e.exports=t(15)()},function(e,n,t){"use strict";var r=t(16);function i(){}e.exports=function(){function e(e,n,t,i,a,c){if(c!==r){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function n(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n};return t.checkPropTypes=i,t.PropTypes=t,t}},function(e,n,t){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,n,t){var r;
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-!function(){"use strict";var t={}.hasOwnProperty;function i(){for(var e=[],n=0;n<arguments.length;n++){var r=arguments[n];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)&&r.length){var c=i.apply(null,r);c&&e.push(c)}else if("object"===a)for(var o in r)t.call(r,o)&&r[o]&&e.push(o)}}return e.join(" ")}e.exports?(i.default=i,e.exports=i):void 0===(r=function(){return i}.apply(n,[]))||(e.exports=r)}()},function(e,n,t){"use strict";t.r(n);var r=t(0),i=t.n(r),a=t(1),c=t.n(a),o=t(2),l=t.n(o);function s(){return(s=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var u=function(e){return i.a.createElement(c.a,s({svg:l.a},e))},f=t(3),p=t.n(f);function d(){return(d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var g=function(e){return i.a.createElement(c.a,d({svg:p.a},e))},m=t(4),v=t.n(m);function b(){return(b=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var h=function(e){return i.a.createElement(c.a,b({svg:v.a},e))},y=t(5),x=t.n(y);function w(){return(w=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var M=function(e){return i.a.createElement(c.a,w({svg:x.a},e))},O=t(6),C=t.n(O);function N(){return(N=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var j=function(e){return i.a.createElement(c.a,N({svg:C.a},e))},k=t(7),S=t.n(k);function P(){return(P=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var T=function(e){return i.a.createElement(c.a,P({svg:S.a},e))},_=t(8),E=t.n(_);function z(){return(z=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var B=function(e){return i.a.createElement(c.a,z({svg:E.a},e))},L=t(9),A=t.n(L);function H(){return(H=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var G=function(e){return i.a.createElement(c.a,H({svg:A.a},e))},J=t(10),I=t.n(J);function R(){return(R=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var F=function(e){return i.a.createElement(c.a,R({svg:I.a},e))},D=t(11),V=t.n(D);function q(){return(q=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var U=function(e){return i.a.createElement(c.a,q({svg:V.a},e))},W=t(12),Y=t.n(W);function K(){return(K=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var Q=function(e){return i.a.createElement(c.a,K({svg:Y.a},e))},X=t(13),Z=t.n(X);function $(){return($=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var ee=function(e){return i.a.createElement(c.a,$({svg:Z.a},e))};t.d(n,"Audio",function(){return u}),t.d(n,"BallTriangle",function(){return g}),t.d(n,"Bars",function(){return h}),t.d(n,"Circles",function(){return M}),t.d(n,"Grid",function(){return j}),t.d(n,"Hearts",function(){return T}),t.d(n,"Oval",function(){return B}),t.d(n,"Puff",function(){return G}),t.d(n,"Rings",function(){return F}),t.d(n,"SpinningCircles",function(){return U}),t.d(n,"TailSpin",function(){return Q}),t.d(n,"ThreeDots",function(){return ee})}]);
+module.exports=function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=1)}([function(e,t){e.exports=require("react")},function(e,t,a){"use strict";a.r(t);var r=a(0),n=a.n(r);function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var c=function(e){return n.a.createElement("svg",i({width:55,height:80,fill:"#FFF"},e),n.a.createElement("g",{transform:"matrix(1 0 0 -1 0 80)"},n.a.createElement("rect",{width:10,height:20,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"4.3s",values:"20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:15,width:10,height:80,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"80;55;33;5;75;23;73;33;12;14;60;80",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,width:10,height:50,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1.4s",values:"50;34;78;23;56;23;34;76;80;54;21;50",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:45,width:10,height:30,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"30;45;13;80;56;72;45;76;34;23;67;30",calcMode:"linear",repeatCount:"indefinite"}))))};function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var o=function(e){return n.a.createElement("svg",l({width:57,height:57,stroke:"#fff"},e),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{cx:5,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:5,to:5,values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:27,to:27,values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",from:49,to:49,begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"}))))};function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var s=function(e){return n.a.createElement("svg",u({width:135,height:140,fill:"#fff"},e),n.a.createElement("rect",{y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:60,width:15,height:140,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:90,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:120,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})))};function m(){return(m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var f=function(e){return n.a.createElement("svg",m({width:135,height:135,fill:"#fff"},e),n.a.createElement("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"-360 67 67",dur:"2.5s",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"360 67 67",dur:"8s",repeatCount:"indefinite"})))};function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var p=function(e){return n.a.createElement("svg",d({width:105,height:105,fill:"#fff"},e),n.a.createElement("circle",{cx:12.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:52.5,r:12.5,fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"100ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"300ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"600ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"800ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"400ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"700ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"500ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"200ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})))};function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var y=function(e){return n.a.createElement("svg",b({width:140,height:64,fill:"#fff"},e),n.a.createElement("path",{d:"M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0.7s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"}))};function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var h=function(e){return n.a.createElement("svg",g({width:38,height:38,stroke:"#fff"},e),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{strokeOpacity:.5,cx:18,cy:18,r:18}),n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"}))))};function v(){return(v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var E=function(e){return n.a.createElement("svg",v({width:44,height:44,stroke:"#fff"},e),n.a.createElement("g",{fill:"none",fillRule:"evenodd",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"}))))};function M(){return(M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var C=function(e){return n.a.createElement("svg",M({width:45,height:45,stroke:"#fff"},e),n.a.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:8},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))};function x(){return(x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var N=function(e){return n.a.createElement("svg",x({width:58,height:58},e),n.a.createElement("g",{transform:"translate(2 1)",stroke:"#FFF",strokeWidth:1.5,fill:"#fff",fillRule:"evenodd"},n.a.createElement("circle",{cx:42.601,cy:11.462,r:5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"1;0;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49.063,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;1;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:42.601,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;1;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:49.125,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;1;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;1;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:4.938,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;1;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:11.462,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;1;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;0;1",calcMode:"linear",repeatCount:"indefinite"}))))};function O(){return(O=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var w=function(e){return n.a.createElement("svg",O({width:38,height:38},e),n.a.createElement("defs",null,n.a.createElement("linearGradient",{x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%",id:"prefix__a"},n.a.createElement("stop",{stopColor:"#fff",stopOpacity:0,offset:"0%"}),n.a.createElement("stop",{stopColor:"#fff",stopOpacity:.631,offset:"63.146%"}),n.a.createElement("stop",{stopColor:"#fff",offset:"100%"}))),n.a.createElement("g",{transform:"translate(1 1)",fill:"none",fillRule:"evenodd"},n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18",stroke:"url(#prefix__a)",strokeWidth:2},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})),n.a.createElement("circle",{fill:"#fff",cx:36,cy:18,r:1},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"}))))};function j(){return(j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var k=function(e){return n.a.createElement("svg",j({width:120,height:30,fill:"#fff"},e),n.a.createElement("circle",{cx:15,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:60,cy:15,r:9,fillOpacity:.3},n.a.createElement("animate",{attributeName:"r",from:9,to:9,begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:.5,to:.5,begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:105,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})))};a.d(t,"Audio",function(){return c}),a.d(t,"BallTriangle",function(){return o}),a.d(t,"Bars",function(){return s}),a.d(t,"Circles",function(){return f}),a.d(t,"Grid",function(){return p}),a.d(t,"Hearts",function(){return y}),a.d(t,"Oval",function(){return h}),a.d(t,"Puff",function(){return E}),a.d(t,"Rings",function(){return C}),a.d(t,"SpinningCircles",function(){return N}),a.d(t,"TailSpin",function(){return w}),a.d(t,"ThreeDots",function(){return k})}]);

package.json

 {
   "name": "svg-loaders-react",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "React implementation of the SVG Loaders library by Sam Herbert",
@@ -35,8 +35,4 @@ "repository": {
     "jest": "^24.8.0",
-    "raw-loader": "^1.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-inlinesvg": "^0.8.4",
-    "react-svg-inline": "^2.1.1",
-    "svg-inline-loader": "^0.8.0",
     "webpack": "^4.29.0",
@@ -47,2 +43,3 @@ "webpack-cli": "^3.2.1"
     "lint": "eslint --ext .js,.ts,.tsx .",
+    "lint:fix": "eslint --ext .js,.ts,.tsx . --fix",
     "test": "jest",
@@ -56,6 +53,3 @@ "test:dev": "jest --watch",
       "./src/setupTests.js"
-    ],
-    "moduleNameMapper": {
-      ".+\\.(svg|png|jpg)$": "identity-obj-proxy"
-    }
+    ]
   },
@@ -62,0 +56,0 @@ "keywords": [

README.md

 [![Build Status](https://travis-ci.org/ajwann/svg-loaders-react.svg?branch=master)](https://travis-ci.org/ajwann/svg-loaders-react)
+[![npm version](https://badge.fury.io/js/svg-loaders-react.svg)](https://badge.fury.io/js/svg-loaders-react)
 
-This is a React adaptation of Sam Herberts [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) library.
+This is a zero-dependency React adaptation of Sam Herberts [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) library.
 
@@ -62,18 +63,17 @@ # Usage
 
-Each of these components wraps an [SVGInline](https://github.com/MoOx/react-svg-inline) component.
-You can pass any options to the loader components that you can an SVGInline component.
-The options are:
-```text
-className
-classSuffix
-component
-fill
-cleanup
-cleanupExceptions
-width
-height
-accessibilityLabel
-accessibilityDesc
+Each of these components should be able to accept any [SVG tag presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) as props. 
+
+# Common Usage
+```Javascript
+// render the Puff loader with a fill opacity of .125
+<Puff fill-opacity=".125" />
+
+// render the Puff loader with a fill of mint green
+<Puff fill="#98ff98" />
+
+// render the Puff loader with a fill of mint green and a fill opactiy of .125
+<Puff fill="#98ff98" fill-opacity=".125" />
 ```
-For a complete description of each option, please see the [react-svg-inline docs](https://github.com/MoOx/react-svg-inline#options-props).
 
+
+

src/svg-loader-components/audio.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './audio.svg';
 
 const Audio = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={55} height={80} fill="#FFF" {...props}>
+    <g transform="matrix(1 0 0 -1 0 80)">
+      <rect width={10} height={20} rx={3}>
+        <animate
+          attributeName="height"
+          begin="0s"
+          dur="4.3s"
+          values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </rect>
+      <rect x={15} width={10} height={80} rx={3}>
+        <animate
+          attributeName="height"
+          begin="0s"
+          dur="2s"
+          values="80;55;33;5;75;23;73;33;12;14;60;80"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </rect>
+      <rect x={30} width={10} height={50} rx={3}>
+        <animate
+          attributeName="height"
+          begin="0s"
+          dur="1.4s"
+          values="50;34;78;23;56;23;34;76;80;54;21;50"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </rect>
+      <rect x={45} width={10} height={30} rx={3}>
+        <animate
+          attributeName="height"
+          begin="0s"
+          dur="2s"
+          values="30;45;13;80;56;72;45;76;34;23;67;30"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g>
+  </svg>
 );
 
 export { Audio };

src/svg-loader-components/ball-triangle.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './ball-triangle.svg';
 
 const BallTriangle = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={57} height={57} stroke="#fff" {...props}>
+    <g
+      transform="translate(1 1)"
+      strokeWidth={2}
+      fill="none"
+      fillRule="evenodd"
+    >
+      <circle cx={5} cy={50} r={5}>
+        <animate
+          attributeName="cy"
+          begin="0s"
+          dur="2.2s"
+          values="50;5;50;50"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="cx"
+          begin="0s"
+          dur="2.2s"
+          values="5;27;49;5"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={27} cy={5} r={5}>
+        <animate
+          attributeName="cy"
+          begin="0s"
+          dur="2.2s"
+          from={5}
+          to={5}
+          values="5;50;50;5"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="cx"
+          begin="0s"
+          dur="2.2s"
+          from={27}
+          to={27}
+          values="27;49;5;27"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={49} cy={50} r={5}>
+        <animate
+          attributeName="cy"
+          begin="0s"
+          dur="2.2s"
+          values="50;50;5;50"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="cx"
+          from={49}
+          to={49}
+          begin="0s"
+          dur="2.2s"
+          values="49;5;27;49"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </g>
+  </svg>
 );
 
 export { BallTriangle };

src/svg-loader-components/bars.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './bars.svg';
 
 const Bars = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={135} height={140} fill="#fff" {...props}>
+    <rect y={10} width={15} height={120} rx={6}>
+      <animate
+        attributeName="height"
+        begin="0.5s"
+        dur="1s"
+        values="120;110;100;90;80;70;60;50;40;140;120"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        begin="0.5s"
+        dur="1s"
+        values="10;15;20;25;30;35;40;45;50;0;10"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x={30} y={10} width={15} height={120} rx={6}>
+      <animate
+        attributeName="height"
+        begin="0.25s"
+        dur="1s"
+        values="120;110;100;90;80;70;60;50;40;140;120"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        begin="0.25s"
+        dur="1s"
+        values="10;15;20;25;30;35;40;45;50;0;10"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x={60} width={15} height={140} rx={6}>
+      <animate
+        attributeName="height"
+        begin="0s"
+        dur="1s"
+        values="120;110;100;90;80;70;60;50;40;140;120"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        begin="0s"
+        dur="1s"
+        values="10;15;20;25;30;35;40;45;50;0;10"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x={90} y={10} width={15} height={120} rx={6}>
+      <animate
+        attributeName="height"
+        begin="0.25s"
+        dur="1s"
+        values="120;110;100;90;80;70;60;50;40;140;120"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        begin="0.25s"
+        dur="1s"
+        values="10;15;20;25;30;35;40;45;50;0;10"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x={120} y={10} width={15} height={120} rx={6}>
+      <animate
+        attributeName="height"
+        begin="0.5s"
+        dur="1s"
+        values="120;110;100;90;80;70;60;50;40;140;120"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        begin="0.5s"
+        dur="1s"
+        values="10;15;20;25;30;35;40;45;50;0;10"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
 );
 
 export { Bars };

src/svg-loader-components/circles.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './circles.svg';
 
 const Circles = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={135} height={135} fill="#fff" {...props}>
+    <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 67 67"
+        to="-360 67 67"
+        dur="2.5s"
+        repeatCount="indefinite"
+      />
+    </path>
+    <path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 67 67"
+        to="360 67 67"
+        dur="8s"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
 );
 
 export { Circles };

src/svg-loader-components/grid.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './grid.svg';
 
 const Grid = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={105} height={105} fill="#fff" {...props}>
+    <circle cx={12.5} cy={12.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={12.5} cy={52.5} r={12.5} fillOpacity={0.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="100ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={52.5} cy={12.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="300ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={52.5} cy={52.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="600ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={92.5} cy={12.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="800ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={92.5} cy={52.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="400ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={12.5} cy={92.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="700ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={52.5} cy={92.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="500ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={92.5} cy={92.5} r={12.5}>
+      <animate
+        attributeName="fill-opacity"
+        begin="200ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
 );
 
 export { Grid };

src/svg-loader-components/hearts.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './hearts.svg';
 
 const Hearts = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={140} height={64} fill="#fff" {...props}>
+    <path
+      d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"
+      fillOpacity={0.5}
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        dur="1.4s"
+        values="0.5;1;0.5"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </path>
+    <path
+      d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"
+      fillOpacity={0.5}
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0.7s"
+        dur="1.4s"
+        values="0.5;1;0.5"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </path>
+    <path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z" />
+  </svg>
 );
-
 export { Hearts };

src/svg-loader-components/oval.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './oval.svg';
 
 const Oval = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={38} height={38} stroke="#fff" {...props}>
+    <g
+      transform="translate(1 1)"
+      strokeWidth={2}
+      fill="none"
+      fillRule="evenodd"
+    >
+      <circle strokeOpacity={0.5} cx={18} cy={18} r={18} />
+      <path d="M36 18c0-9.94-8.06-18-18-18">
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 18 18"
+          to="360 18 18"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </g>
+  </svg>
 );
 
+
 export { Oval };

src/svg-loader-components/puff.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './puff.svg';
 
 const Puff = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={44} height={44} stroke="#fff" {...props}>
+    <g fill="none" fillRule="evenodd" strokeWidth={2}>
+      <circle cx={22} cy={22} r={1}>
+        <animate
+          attributeName="r"
+          begin="0s"
+          dur="1.8s"
+          values="1; 20"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines="0.165, 0.84, 0.44, 1"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="0s"
+          dur="1.8s"
+          values="1; 0"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines="0.3, 0.61, 0.355, 1"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={22} cy={22} r={1}>
+        <animate
+          attributeName="r"
+          begin="-0.9s"
+          dur="1.8s"
+          values="1; 20"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines="0.165, 0.84, 0.44, 1"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="-0.9s"
+          dur="1.8s"
+          values="1; 0"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines="0.3, 0.61, 0.355, 1"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </g>
+  </svg>
 );
 
 export { Puff };

src/svg-loader-components/rings.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './rings.svg';
 
 const Rings = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={45} height={45} stroke="#fff" {...props}>
+    <g
+      fill="none"
+      fillRule="evenodd"
+      transform="translate(1 1)"
+      strokeWidth={2}
+    >
+      <circle cx={22} cy={22} r={6} strokeOpacity={0}>
+        <animate
+          attributeName="r"
+          begin="1.5s"
+          dur="3s"
+          values="6;22"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="1.5s"
+          dur="3s"
+          values="1;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke-width"
+          begin="1.5s"
+          dur="3s"
+          values="2;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={22} cy={22} r={6} strokeOpacity={0}>
+        <animate
+          attributeName="r"
+          begin="3s"
+          dur="3s"
+          values="6;22"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="3s"
+          dur="3s"
+          values="1;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke-width"
+          begin="3s"
+          dur="3s"
+          values="2;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={22} cy={22} r={8}>
+        <animate
+          attributeName="r"
+          begin="0s"
+          dur="1.5s"
+          values="6;1;2;3;4;5;6"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </g>
+  </svg>
 );
 
 export { Rings };

src/svg-loader-components/spinning-circles.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './spinning-circles.svg';
 
 const SpinningCircles = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={58} height={58} {...props}>
+    <g
+      transform="translate(2 1)"
+      stroke="#FFF"
+      strokeWidth={1.5}
+      fill="#fff"
+      fillRule="evenodd"
+    >
+      <circle cx={42.601} cy={11.462} r={5}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="1;0;0;0;0;0;0;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={49.063} cy={27.063} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;1;0;0;0;0;0;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={42.601} cy={42.663} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;0;1;0;0;0;0;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={27} cy={49.125} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;0;0;1;0;0;0;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={11.399} cy={42.663} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;0;0;0;1;0;0;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={4.938} cy={27.063} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;0;0;0;0;1;0;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={11.399} cy={11.462} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;0;0;0;0;0;1;0"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx={27} cy={5} r={5} fillOpacity={0}>
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1.3s"
+          values="0;0;0;0;0;0;0;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </g>
+  </svg>
 );
 
 export { SpinningCircles };

src/svg-loader-components/tail-spin.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './tail-spin.svg';
 
 const TailSpin = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={38} height={38} {...props}>
+    <defs>
+      <linearGradient
+        x1="8.042%"
+        y1="0%"
+        x2="65.682%"
+        y2="23.865%"
+        id="prefix__a"
+      >
+        <stop stopColor="#fff" stopOpacity={0} offset="0%" />
+        <stop stopColor="#fff" stopOpacity={0.631} offset="63.146%" />
+        <stop stopColor="#fff" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g transform="translate(1 1)" fill="none" fillRule="evenodd">
+      <path
+        d="M36 18c0-9.94-8.06-18-18-18"
+        stroke="url(#prefix__a)"
+        strokeWidth={2}
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 18 18"
+          to="360 18 18"
+          dur="0.9s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <circle fill="#fff" cx={36} cy={18} r={1}>
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 18 18"
+          to="360 18 18"
+          dur="0.9s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </g>
+  </svg>
 );
 
 export { TailSpin };

src/svg-loader-components/three-dots.js

 import React from 'react';
-import SVGInline from 'react-svg-inline';
-import image from './three-dots.svg';
 
 const ThreeDots = props => (
-  <SVGInline svg={image} {...props} />
+  <svg width={120} height={30} fill="#fff" {...props}>
+    <circle cx={15} cy={15} r={15}>
+      <animate
+        attributeName="r"
+        from={15}
+        to={15}
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from={1}
+        to={1}
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={60} cy={15} r={9} fillOpacity={0.3}>
+      <animate
+        attributeName="r"
+        from={9}
+        to={9}
+        begin="0s"
+        dur="0.8s"
+        values="9;15;9"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from={0.5}
+        to={0.5}
+        begin="0s"
+        dur="0.8s"
+        values=".5;1;.5"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx={105} cy={15} r={15}>
+      <animate
+        attributeName="r"
+        from={15}
+        to={15}
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from={1}
+        to={1}
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
 );
 
 export { ThreeDots };

webpack.config.js

@@ -24,6 +24,2 @@ const path = require('path');
       },
-      {
-        test: /\.svg$/,
-        loader: 'raw-loader',
-      },
     ],
@@ -30,0 +26,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

23

decreased by-14.81%

Lines of code

938

increased by147.49%

Number of low supply chain risk alerts

1

decreased by-91.67%

Worsened metrics

Total package byte prevSize

51161

decreased by-21.63%

Number of package files

37

decreased by-24.49%

No dependency changes