react-svg
Advanced tools
Comparing version 1.1.2 to 1.1.3
@@ -87,3 +87,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
return _possibleConstructorReturn(this, Object.getPrototypeOf(ReactSVG).apply(this, arguments)); | ||
return _possibleConstructorReturn(this, (ReactSVG.__proto__ || Object.getPrototypeOf(ReactSVG)).apply(this, arguments)); | ||
} | ||
@@ -90,0 +90,0 @@ |
@@ -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,Object.getPrototypeOf(e).apply(this,arguments))}return a(e,t),s(e,[{key:"render",value:function(){var t=this,e=this.props,r=e.className,n=e.path,o=e.fallbackPath;return c.default.createElement("img",{className:r,"data-src":n,"data-fallback":o,ref:function(e){return t._img=e}})}},{key:"componentDidMount",value:function(){var t=this.props,e=t.evalScripts,r=t.callback;(0,f.default)(this._img,{evalScripts:e,each:r})}}]),e}(l.Component);p.defaultProps={evalScripts:"never",callback:function(){}},p.propTypes={path:l.PropTypes.string.isRequired,className:l.PropTypes.string,evalScripts:l.PropTypes.oneOf(["always","once","never"]),fallbackPath:l.PropTypes.string,callback:l.PropTypes.func},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:"render",value:function(){var t=this,e=this.props,r=e.className,n=e.path,o=e.fallbackPath;return c.default.createElement("img",{className:r,"data-src":n,"data-fallback":o,ref:function(e){return t._img=e}})}},{key:"componentDidMount",value:function(){var t=this.props,e=t.evalScripts,r=t.callback;(0,f.default)(this._img,{evalScripts:e,each:r})}}]),e}(l.Component);p.defaultProps={evalScripts:"never",callback:function(){}},p.propTypes={path:l.PropTypes.string.isRequired,className:l.PropTypes.string,evalScripts:l.PropTypes.oneOf(["always","once","never"]),fallbackPath:l.PropTypes.string,callback:l.PropTypes.func},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;n>r;++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;r>e;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(i){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."))}-1===p.indexOf(t)&&(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;n>e;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;n>e;e++)o[e].setAttribute(t,"url(#"+w+")")}),b[e].id=w}}),r.removeAttribute("xmlns:a");for(var A,k,j=r.querySelectorAll("script"),S=[],T=0,P=j.length;P>T;T++)k=j[T].getAttribute("type"),k&&"application/ecmascript"!==k&&"application/javascript"!==k||(A=j[T].innerText||j[T].textContent,S.push(A),r.removeChild(j[T]));if(S.length>0&&("always"===e||"once"===e&&!v[i])){for(var O=0,M=S.length;M>O;O++)new Function(S[O])(o);v[i]=!0}var E=r.querySelectorAll("style");c.call(E,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={},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(i){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,k,j=r.querySelectorAll("script"),S=[],T=0,P=j.length;T<P;T++)k=j[T].getAttribute("type"),k&&"application/ecmascript"!==k&&"application/javascript"!==k||(A=j[T].innerText||j[T].textContent,S.push(A),r.removeChild(j[T]));if(S.length>0&&("always"===e||"once"===e&&!v[i])){for(var O=0,M=S.length;O<M;O++)new Function(S[O])(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}])}); |
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import ReactSVG from '../src/index.js'; | ||
import ReactSVG from '../lib'; | ||
@@ -6,0 +6,0 @@ ReactDOM.render( |
@@ -1,2 +0,12 @@ | ||
/******/ (function(modules) { // webpackBootstrap | ||
(function webpackUniversalModuleDefinition(root, factory) { | ||
if(typeof exports === 'object' && typeof module === 'object') | ||
module.exports = factory(require("react")); | ||
else if(typeof define === 'function' && define.amd) | ||
define(["react"], factory); | ||
else { | ||
var a = typeof exports === 'object' ? factory(require("react")) : factory(root["React"]); | ||
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; | ||
} | ||
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { | ||
return /******/ (function(modules) { // webpackBootstrap | ||
/******/ // The module cache | ||
@@ -77,3 +87,3 @@ /******/ var installedModules = {}; | ||
return _possibleConstructorReturn(this, Object.getPrototypeOf(ReactSVG).apply(this, arguments)); | ||
return _possibleConstructorReturn(this, (ReactSVG.__proto__ || Object.getPrototypeOf(ReactSVG)).apply(this, arguments)); | ||
} | ||
@@ -136,3 +146,3 @@ | ||
module.exports = undefined; | ||
module.exports = __WEBPACK_EXTERNAL_MODULE_1__; | ||
@@ -610,2 +620,4 @@ /***/ }, | ||
/***/ } | ||
/******/ ]); | ||
/******/ ]) | ||
}); | ||
; |
{ | ||
"name": "react-svg", | ||
"version": "1.1.2", | ||
"version": "1.1.3", | ||
"description": "A react.js svg component for loading svg files into the dom.", | ||
@@ -36,3 +36,3 @@ "main": "lib/index.js", | ||
"peerDependencies": { | ||
"react": "^15.0.2" | ||
"react": "^15.3.2" | ||
}, | ||
@@ -43,24 +43,25 @@ "dependencies": { | ||
"devDependencies": { | ||
"babel-cli": "^6.7.7", | ||
"babel-eslint": "^6.0.4", | ||
"babel-loader": "^6.2.4", | ||
"babel-preset-es2015": "^6.6.0", | ||
"babel-preset-react": "^6.5.0", | ||
"babel-preset-stage-1": "^6.5.0", | ||
"babel-cli": "^6.16.0", | ||
"babel-eslint": "^7.0.0", | ||
"babel-loader": "^6.2.5", | ||
"babel-preset-es2015": "^6.16.0", | ||
"babel-preset-react": "^6.16.0", | ||
"babel-preset-stage-1": "^6.16.0", | ||
"chai": "^3.5.0", | ||
"eslint": "^2.9.0", | ||
"eslint-plugin-react": "^5.0.1", | ||
"karma": "^0.13.22", | ||
"karma-chrome-launcher": "^0.2.3", | ||
"karma-mocha": "^0.2.2", | ||
"karma-mocha-reporter": "^2.0.2", | ||
"eslint": "^3.8.0", | ||
"eslint-plugin-react": "^6.4.1", | ||
"karma": "^1.3.0", | ||
"karma-chrome-launcher": "^2.0.0", | ||
"karma-mocha": "^1.2.0", | ||
"karma-mocha-reporter": "^2.2.0", | ||
"karma-sourcemap-loader": "^0.3.7", | ||
"karma-webpack": "^1.7.0", | ||
"mocha": "^2.4.5", | ||
"react": "^15.0.2", | ||
"react-addons-test-utils": "^15.0.2", | ||
"react-dom": "^15.0.2", | ||
"webpack": "^1.13.0", | ||
"webpack-dev-server": "^1.14.1" | ||
"karma-webpack": "^1.8.0", | ||
"mocha": "^3.1.2", | ||
"react": "^15.3.2", | ||
"react-addons-test-utils": "^15.3.2", | ||
"react-dom": "^15.3.2", | ||
"rimraf": "^2.5.4", | ||
"webpack": "^1.13.2", | ||
"webpack-dev-server": "^1.16.2" | ||
} | ||
} |
@@ -6,32 +6,11 @@ # react-svg | ||
A React component that uses [SVGInjector](https://github.com/iconic/SVGInjector) to dynamically add SVG to the DOM. | ||
> A React component that uses [SVGInjector](https://github.com/iconic/SVGInjector) to add SVG to the DOM. | ||
## table of contents | ||
## Usage | ||
- [react-svg](#react-svg) | ||
- [table of contents](#table-of-contents) | ||
- [installation](#installation) | ||
- [example](#example) | ||
- [api](#api) | ||
- [tests](#tests) | ||
- [releasing](#releasing) | ||
- [roadmap](#roadmap) | ||
- [license](#license) | ||
## installation | ||
``` | ||
$ npm install react-svg --save | ||
``` | ||
There are also UMD builds available in the `dist` directory. If you use these, make sure you have already included React as a dependency. | ||
## example | ||
```js | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import ReactSVG from 'react-svg'; | ||
import ReactSVG from '../src/index.js'; | ||
ReactDOM.render( | ||
@@ -47,12 +26,6 @@ <ReactSVG | ||
To run the above example: | ||
There is a working version of the above in the `example` dir. First run `npm start`, then point a browser at `localhost:8080`. | ||
``` | ||
$ npm start | ||
``` | ||
## API | ||
Then open a browser at `localhost:8080`. | ||
## api | ||
__Props__ | ||
@@ -80,24 +53,12 @@ | ||
## tests | ||
## Install | ||
``` | ||
$ npm test | ||
$ npm install react-svg --save | ||
``` | ||
## releasing | ||
There are also UMD builds available in the `dist` directory. If you use these, make sure you have already included React as a dependency. | ||
The release script for this module uses [npm-version](https://docs.npmjs.com/cli/version) under the hood, so you should pass a semver string or release type as an argument. | ||
## License | ||
For example, to publish a `patch` release: | ||
``` | ||
$ npm run release -- patch | ||
``` | ||
## roadmap | ||
react-svg does not currently support being rendered in Node. This is because SVGInjector uses XMLHttpRequest, something that Node does not have locally. It would be nice to rewrite SVGInjector to use something environment agnostic, like superagent or anything along those lines. This would allow react-svg to be rendered on both client and server. | ||
## license | ||
MIT |
1032
58770
22
62
3