react-svg
Version:
A React component that injects SVG into the DOM.
3 lines (2 loc) • 4.1 kB
JavaScript
var _objectWithoutPropertiesLoose=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),_extends=require("@babel/runtime/helpers/extends"),_inheritsLoose=require("@babel/runtime/helpers/inheritsLoose"),svgInjector=require("@tanem/svg-injector"),React=require("react");function _interopNamespaceDefault(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var React__namespace=_interopNamespaceDefault(React),ownerWindow=function(e){return((null==e?void 0:e.ownerDocument)||document).defaultView||window},shallowDiffers=function(e,t){for(var r in e)if(!(r in t))return!0;for(var n in t)if(e[n]!==t[n])return!0;return!1},_excluded=["afterInjection","beforeInjection","desc","evalScripts","fallback","httpRequestWithCredentials","loading","renumerateIRIElements","src","title","useRequestCache","wrapper"],svgNamespace="http://www.w3.org/2000/svg",xlinkNamespace="http://www.w3.org/1999/xlink",ReactSVG=function(e){function t(){for(var t,r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];return(t=e.call.apply(e,[this].concat(n))||this).initialState={hasError:!1,isLoading:!0},t.state=t.initialState,t._isMounted=!1,t.reactWrapper=void 0,t.nonReactWrapper=void 0,t.refCallback=function(e){t.reactWrapper=e},t}_inheritsLoose(t,e);var r=t.prototype;return r.renderSVG=function(){var e=this;if(this.reactWrapper instanceof ownerWindow(this.reactWrapper).Node){var t,r,n=this.props,a=n.desc,i=n.evalScripts,o=n.httpRequestWithCredentials,s=n.renumerateIRIElements,c=n.src,p=n.title,u=n.useRequestCache,l=this.props.onError,d=this.props.beforeInjection,h=this.props.afterInjection,f=this.props.wrapper;"svg"===f?((t=document.createElementNS(svgNamespace,f)).setAttribute("xmlns",svgNamespace),t.setAttribute("xmlns:xlink",xlinkNamespace),r=document.createElementNS(svgNamespace,f)):(t=document.createElement(f),r=document.createElement(f)),t.appendChild(r),r.dataset.src=c,this.nonReactWrapper=this.reactWrapper.appendChild(t);var m=function(t){e.removeSVG(),e._isMounted?e.setState((function(){return{hasError:!0,isLoading:!1}}),(function(){l(t)})):l(t)};svgInjector.SVGInjector(r,{afterEach:function(t,r){t?m(t):e._isMounted&&e.setState((function(){return{isLoading:!1}}),(function(){try{h(r)}catch(e){m(e)}}))},beforeEach:function(e){if(e.setAttribute("role","img"),a){var t=e.querySelector(":scope > desc");t&&e.removeChild(t);var r=document.createElement("desc");r.innerHTML=a,e.prepend(r)}if(p){var n=e.querySelector(":scope > title");n&&e.removeChild(n);var i=document.createElement("title");i.innerHTML=p,e.prepend(i)}try{d(e)}catch(e){m(e)}},cacheRequests:u,evalScripts:i,httpRequestWithCredentials:o,renumerateIRIElements:s})}},r.removeSVG=function(){var e;null!=(e=this.nonReactWrapper)&&e.parentNode&&(this.nonReactWrapper.parentNode.removeChild(this.nonReactWrapper),this.nonReactWrapper=null)},r.componentDidMount=function(){this._isMounted=!0,this.renderSVG()},r.componentDidUpdate=function(e){var t=this;shallowDiffers(_extends({},e),this.props)&&this.setState((function(){return t.initialState}),(function(){t.removeSVG(),t.renderSVG()}))},r.componentWillUnmount=function(){this._isMounted=!1,this.removeSVG()},r.render=function(){var e=this.props,t=e.fallback,r=e.loading,n=e.wrapper,a=_objectWithoutPropertiesLoose(e,_excluded);return React__namespace.createElement(n,_extends({},a,{ref:this.refCallback},"svg"===n?{xmlns:svgNamespace,xmlnsXlink:xlinkNamespace}:{}),this.state.isLoading&&r&&React__namespace.createElement(r,null),this.state.hasError&&t&&React__namespace.createElement(t,null))},t}(React__namespace.Component);ReactSVG.defaultProps={afterInjection:function(){},beforeInjection:function(){},desc:"",evalScripts:"never",fallback:null,httpRequestWithCredentials:!1,loading:null,onError:function(){},renumerateIRIElements:!0,title:"",useRequestCache:!0,wrapper:"div"},exports.ReactSVG=ReactSVG;
//# sourceMappingURL=react-svg.cjs.production.js.map
;