react-svg - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

dist/react-svg.js

@@ -122,3 +122,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	          className = _props2.className,
-	          path = _props2.path;
+	          path = _props2.path,
+	          style = _props2.style;
 
@@ -134,3 +135,4 @@
 	          className: className,
-	          'data-src': path
+	          'data-src': path,
+	          style: style
 	        })
@@ -147,3 +149,4 @@ );
 	  className: '',
-	  evalScripts: 'once'
+	  evalScripts: 'once',
+	  style: {}
 	};
@@ -154,3 +157,4 @@ ReactSVG.propTypes = {
 	  evalScripts: _react.PropTypes.oneOf(['always', 'once', 'never']),
-	  path: _react.PropTypes.string.isRequired
+	  path: _react.PropTypes.string.isRequired,
+	  style: _react.PropTypes.object
 	};
@@ -157,0 +161,0 @@ exports.default = ReactSVG;

dist/react-svg.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-svg"]=e(require("react")):t["react-svg"]=e(t.React)}(this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),l=r(2),c=n(l),u=r(1),f=n(u),p=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),s(e,[{key:"injectSVG",value:function(){var t=this.props,e=t.evalScripts,r=t.callback;this._img&&(0,f.default)(this._img,{evalScripts:e,each:r})}},{key:"componentDidMount",value:function(){this.injectSVG()}},{key:"componentDidUpdate",value:function(){this.injectSVG()}},{key:"render",value:function(){var t=this,e=this.props,r=e.className,n=e.path;return c.default.createElement("div",null,c.default.createElement("img",{ref:function(e){return t._img=e},className:r,"data-src":n}))}}]),e}(l.PureComponent);p.defaultProps={callback:function(){},className:"",evalScripts:"once"},p.propTypes={callback:l.PropTypes.func,className:l.PropTypes.string,evalScripts:l.PropTypes.oneOf(["always","once","never"]),path:l.PropTypes.string.isRequired},e.default=p},function(t,e,r){var n;/**
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-svg"]=e(require("react")):t["react-svg"]=e(t.React)}(this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),l=r(2),c=n(l),u=r(1),f=n(u),p=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),s(e,[{key:"injectSVG",value:function(){var t=this.props,e=t.evalScripts,r=t.callback;this._img&&(0,f.default)(this._img,{evalScripts:e,each:r})}},{key:"componentDidMount",value:function(){this.injectSVG()}},{key:"componentDidUpdate",value:function(){this.injectSVG()}},{key:"render",value:function(){var t=this,e=this.props,r=e.className,n=e.path,o=e.style;return c.default.createElement("div",null,c.default.createElement("img",{ref:function(e){return t._img=e},className:r,"data-src":n,style:o}))}}]),e}(l.PureComponent);p.defaultProps={callback:function(){},className:"",evalScripts:"once",style:{}},p.propTypes={callback:l.PropTypes.func,className:l.PropTypes.string,evalScripts:l.PropTypes.oneOf(["always","once","never"]),path:l.PropTypes.string.isRequired,style:l.PropTypes.object},e.default=p},function(t,e,r){var n;/**
 	 * SVGInjector v1.1.3 - Fast, caching, dynamic inline SVG DOM injection library
@@ -8,2 +8,2 @@ * https://github.com/iconic/SVGInjector
 	 */
-!function(o,i){"use strict";function a(t){t=t.split(" ");for(var e={},r=t.length,n=[];r--;)e.hasOwnProperty(t[r])||(e[t[r]]=1,n.unshift(t[r]));return n.join(" ")}var s="file:"===o.location.protocol,l=i.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"),c=Array.prototype.forEach||function(t,e){if(void 0===this||null===this||"function"!=typeof t)throw new TypeError;var r,n=this.length>>>0;for(r=0;r<n;++r)r in this&&t.call(e,this[r],r,this)},u={},f=0,p=[],d=[],v={},h=function(t){return t.cloneNode(!0)},y=function(t,e){d[t]=d[t]||[],d[t].push(e)},b=function(t){for(var e=0,r=d[t].length;e<r;e++)!function(e){setTimeout(function(){d[t][e](h(u[t]))},0)}(e)},m=function(t,e){if(void 0!==u[t])u[t]instanceof SVGSVGElement?e(h(u[t])):y(t,e);else{if(!o.XMLHttpRequest)return e("Browser does not support XMLHttpRequest"),!1;u[t]={},y(t,e);var r=new XMLHttpRequest;r.onreadystatechange=function(){if(4===r.readyState){if(404===r.status||null===r.responseXML)return e("Unable to load SVG file: "+t),s&&e("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),e(),!1;if(!(200===r.status||s&&0===r.status))return e("There was a problem injecting the SVG: "+r.status+" "+r.statusText),!1;if(r.responseXML instanceof Document)u[t]=r.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var n;try{var o=new DOMParser;n=o.parseFromString(r.responseText,"text/xml")}catch(t){n=void 0}if(!n||n.getElementsByTagName("parsererror").length)return e("Unable to parse SVG file: "+t),!1;u[t]=n.documentElement}b(t)}},r.open("GET",t),r.overrideMimeType&&r.overrideMimeType("text/xml"),r.send()}},g=function(t,e,r,n){var i=t.getAttribute("data-src")||t.getAttribute("src");if(!/\.svg/i.test(i))return void n("Attempted to inject a file with a non-svg extension: "+i);if(!l){var s=t.getAttribute("data-fallback")||t.getAttribute("data-png");return void(s?(t.setAttribute("src",s),n(null)):r?(t.setAttribute("src",r+"/"+i.split("/").pop().replace(".svg",".png")),n(null)):n("This browser does not support SVG and no PNG fallback was defined."))}p.indexOf(t)===-1&&(p.push(t),t.setAttribute("src",""),m(i,function(r){if("undefined"==typeof r||"string"==typeof r)return n(r),!1;var s=t.getAttribute("id");s&&r.setAttribute("id",s);var l=t.getAttribute("title");l&&r.setAttribute("title",l);var u=[].concat(r.getAttribute("class")||[],"injected-svg",t.getAttribute("class")||[]).join(" ");r.setAttribute("class",a(u));var d=t.getAttribute("style");d&&r.setAttribute("style",d);var h=[].filter.call(t.attributes,function(t){return/^data-\w[\w\-]*$/.test(t.name)});c.call(h,function(t){t.name&&t.value&&r.setAttribute(t.name,t.value)});var y,b,m,g,w,x={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(x).forEach(function(t){y=t,m=x[t],b=r.querySelectorAll("defs "+y+"[id]");for(var e=0,n=b.length;e<n;e++){g=b[e].id,w=g+"-"+f;var o;c.call(m,function(t){o=r.querySelectorAll("["+t+'*="'+g+'"]');for(var e=0,n=o.length;e<n;e++)o[e].setAttribute(t,"url(#"+w+")")}),b[e].id=w}}),r.removeAttribute("xmlns:a");for(var A,j,S=r.querySelectorAll("script"),k=[],T=0,O=S.length;T<O;T++)j=S[T].getAttribute("type"),j&&"application/ecmascript"!==j&&"application/javascript"!==j||(A=S[T].innerText||S[T].textContent,k.push(A),r.removeChild(S[T]));if(k.length>0&&("always"===e||"once"===e&&!v[i])){for(var P=0,G=k.length;P<G;P++)new Function(k[P])(o);v[i]=!0}var _=r.querySelectorAll("style");c.call(_,function(t){t.textContent+=""}),t.parentNode.replaceChild(r,t),delete p[p.indexOf(t)],t=null,f++,n(r)}))},w=function(t,e,r){e=e||{};var n=e.evalScripts||"always",o=e.pngFallback||!1,i=e.each;if(void 0!==t.length){var a=0;c.call(t,function(e){g(e,n,o,function(e){i&&"function"==typeof i&&i(e),r&&t.length===++a&&r(a)})})}else t?g(t,n,o,function(e){i&&"function"==typeof i&&i(e),r&&r(1),t=null}):r&&r(0)};"object"==typeof t&&"object"==typeof t.exports?t.exports=e=w:(n=function(){return w}.call(e,r,e,t),!(void 0!==n&&(t.exports=n)))}(window,document)},function(e,r){e.exports=t}])});
+!function(o,i){"use strict";function a(t){t=t.split(" ");for(var e={},r=t.length,n=[];r--;)e.hasOwnProperty(t[r])||(e[t[r]]=1,n.unshift(t[r]));return n.join(" ")}var s="file:"===o.location.protocol,l=i.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"),c=Array.prototype.forEach||function(t,e){if(void 0===this||null===this||"function"!=typeof t)throw new TypeError;var r,n=this.length>>>0;for(r=0;r<n;++r)r in this&&t.call(e,this[r],r,this)},u={},f=0,p=[],d=[],v={},y=function(t){return t.cloneNode(!0)},h=function(t,e){d[t]=d[t]||[],d[t].push(e)},b=function(t){for(var e=0,r=d[t].length;e<r;e++)!function(e){setTimeout(function(){d[t][e](y(u[t]))},0)}(e)},m=function(t,e){if(void 0!==u[t])u[t]instanceof SVGSVGElement?e(y(u[t])):h(t,e);else{if(!o.XMLHttpRequest)return e("Browser does not support XMLHttpRequest"),!1;u[t]={},h(t,e);var r=new XMLHttpRequest;r.onreadystatechange=function(){if(4===r.readyState){if(404===r.status||null===r.responseXML)return e("Unable to load SVG file: "+t),s&&e("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),e(),!1;if(!(200===r.status||s&&0===r.status))return e("There was a problem injecting the SVG: "+r.status+" "+r.statusText),!1;if(r.responseXML instanceof Document)u[t]=r.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var n;try{var o=new DOMParser;n=o.parseFromString(r.responseText,"text/xml")}catch(t){n=void 0}if(!n||n.getElementsByTagName("parsererror").length)return e("Unable to parse SVG file: "+t),!1;u[t]=n.documentElement}b(t)}},r.open("GET",t),r.overrideMimeType&&r.overrideMimeType("text/xml"),r.send()}},g=function(t,e,r,n){var i=t.getAttribute("data-src")||t.getAttribute("src");if(!/\.svg/i.test(i))return void n("Attempted to inject a file with a non-svg extension: "+i);if(!l){var s=t.getAttribute("data-fallback")||t.getAttribute("data-png");return void(s?(t.setAttribute("src",s),n(null)):r?(t.setAttribute("src",r+"/"+i.split("/").pop().replace(".svg",".png")),n(null)):n("This browser does not support SVG and no PNG fallback was defined."))}p.indexOf(t)===-1&&(p.push(t),t.setAttribute("src",""),m(i,function(r){if("undefined"==typeof r||"string"==typeof r)return n(r),!1;var s=t.getAttribute("id");s&&r.setAttribute("id",s);var l=t.getAttribute("title");l&&r.setAttribute("title",l);var u=[].concat(r.getAttribute("class")||[],"injected-svg",t.getAttribute("class")||[]).join(" ");r.setAttribute("class",a(u));var d=t.getAttribute("style");d&&r.setAttribute("style",d);var y=[].filter.call(t.attributes,function(t){return/^data-\w[\w\-]*$/.test(t.name)});c.call(y,function(t){t.name&&t.value&&r.setAttribute(t.name,t.value)});var h,b,m,g,w,x={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(x).forEach(function(t){h=t,m=x[t],b=r.querySelectorAll("defs "+h+"[id]");for(var e=0,n=b.length;e<n;e++){g=b[e].id,w=g+"-"+f;var o;c.call(m,function(t){o=r.querySelectorAll("["+t+'*="'+g+'"]');for(var e=0,n=o.length;e<n;e++)o[e].setAttribute(t,"url(#"+w+")")}),b[e].id=w}}),r.removeAttribute("xmlns:a");for(var j,A,S=r.querySelectorAll("script"),k=[],T=0,O=S.length;T<O;T++)A=S[T].getAttribute("type"),A&&"application/ecmascript"!==A&&"application/javascript"!==A||(j=S[T].innerText||S[T].textContent,k.push(j),r.removeChild(S[T]));if(k.length>0&&("always"===e||"once"===e&&!v[i])){for(var P=0,G=k.length;P<G;P++)new Function(k[P])(o);v[i]=!0}var _=r.querySelectorAll("style");c.call(_,function(t){t.textContent+=""}),t.parentNode.replaceChild(r,t),delete p[p.indexOf(t)],t=null,f++,n(r)}))},w=function(t,e,r){e=e||{};var n=e.evalScripts||"always",o=e.pngFallback||!1,i=e.each;if(void 0!==t.length){var a=0;c.call(t,function(e){g(e,n,o,function(e){i&&"function"==typeof i&&i(e),r&&t.length===++a&&r(a)})})}else t?g(t,n,o,function(e){i&&"function"==typeof i&&i(e),r&&r(1),t=null}):r&&r(0)};"object"==typeof t&&"object"==typeof t.exports?t.exports=e=w:(n=function(){return w}.call(e,r,e,t),!(void 0!==n&&(t.exports=n)))}(window,document)},function(e,r){e.exports=t}])});

lib/index.js

@@ -66,3 +66,4 @@ 'use strict';
           className = _props2.className,
-          path = _props2.path;
+          path = _props2.path,
+          style = _props2.style;
 
@@ -78,3 +79,4 @@
           className: className,
-          'data-src': path
+          'data-src': path,
+          style: style
         })
@@ -91,3 +93,4 @@ );
   className: '',
-  evalScripts: 'once'
+  evalScripts: 'once',
+  style: {}
 };
@@ -98,4 +101,5 @@ ReactSVG.propTypes = {
   evalScripts: _react.PropTypes.oneOf(['always', 'once', 'never']),
-  path: _react.PropTypes.string.isRequired
+  path: _react.PropTypes.string.isRequired,
+  style: _react.PropTypes.object
 };
 exports.default = ReactSVG;

package.json

 {
   "name": "react-svg",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A react.js svg component for loading svg files into the dom.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -35,2 +35,3 @@ # react-svg
 - `evalScripts` - *Optional* Run any script blocks found in the SVG (`always`, `once`, or `never`). Defaults to `never`.
+- `style` - *Optional* Inline styles to be added to the SVG. Defaults to `{}`.
 
@@ -45,2 +46,3 @@ __Example__
   evalScript="always"
+  style={{ width: 200 }}
 />
@@ -47,0 +49,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

41096

increased by0.9%

Lines of code

634

increased by1.44%

Number of lines in readme file

67

increased by3.08%

No dependency changes