You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@opuscapita/react-svg

Package Overview
Dependencies
Maintainers
13
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@opuscapita/react-svg - npm Package Compare versions

Comparing version

1.0.5
to
2.0.0

lib/SVG/SVG.less
lib/SVGIcon/SVGIcon.less

13

CHANGES.txt
Release 2.0.0 Mon Sep 11 2017 17:29:20 GMT+0300 (+03)
=======================================================
- Increment major package version (Kirill Volkovich <kirill.volkovich@jcatalog.com>, Mon Sep 11 17:28:58 2017 +0300)
- Remove css-modules usage (Kirill Volkovich <kirill.volkovich@jcatalog.com>, Mon Sep 11 17:28:20 2017 +0300)
- Updating to a version to 1.0.6 (Kirill Volkovich <kirill.volkovich@jcatalog.com>, Wed Aug 30 18:30:46 2017 +0300)
Release 1.0.6 Mon Sep 11 2017 17:28:44 GMT+0300 (+03)
=======================================================
- Remove css-modules usage (Kirill Volkovich <kirill.volkovich@jcatalog.com>, Mon Sep 11 17:28:20 2017 +0300)
- Updating to a version to 1.0.6 (Kirill Volkovich <kirill.volkovich@jcatalog.com>, Wed Aug 30 18:30:46 2017 +0300)
Release 1.0.5 Wed Aug 30 2017 18:30:36 GMT+0300 (+03)

@@ -3,0 +16,0 @@ =======================================================

2

lib/index.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-svg"]=t(require("react")):e["react-svg"]=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get: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,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=16)}([function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},function(e,t){function n(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=p[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(l(r.parts[i],t))}else{for(var s=[],i=0;i<r.parts.length;i++)s.push(l(r.parts[i],t));p[r.id]={id:r.id,refs:1,parts:s}}}}function r(e){for(var t=[],n={},r=0;r<e.length;r++){var o=e[r],i=o[0],s=o[1],a=o[2],l=o[3],u={css:s,media:a,sourceMap:l};n[i]?n[i].parts.push(u):t.push(n[i]={id:i,parts:[u]})}return t}function o(e,t){var n=h(),r=_[_.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),_.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function i(e){e.parentNode.removeChild(e);var t=_.indexOf(e);t>=0&&_.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function a(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function l(e,t){var n,r,o;if(t.singleton){var l=m++;n=y||(y=s(t)),r=u.bind(null,n,l,!1),o=u.bind(null,n,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=a(t),r=f.bind(null,n),o=function(){i(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(t),r=c.bind(null,n),o=function(){i(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function u(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,o);else{var i=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(i,s[t]):e.appendChild(i)}}function c(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function f(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var p={},d=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}},v=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),h=d(function(){return document.head||document.getElementsByTagName("head")[0]}),y=null,m=0,_=[];e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},void 0===t.singleton&&(t.singleton=v()),void 0===t.insertAt&&(t.insertAt="bottom");var o=r(e);return n(o,t),function(e){for(var i=[],s=0;s<o.length;s++){var a=o[s],l=p[a.id];l.refs--,i.push(l)}if(e){n(r(e),t)}for(var s=0;s<i.length;s++){var l=i[s];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete p[l.id]}}}};var g=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=n(6).default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=n(7).default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=n(8).default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(2),u=r(l),c=n(13),f=r(c),p={height:"24px",width:"24px"},d=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),a(t,[{key:"render",value:function(){var e=this.props,t=e.svg,n=e.children,r=e.className,o=Object.assign({},p,this.props.style);return u.default.createElement("div",{className:f.default.svg+" "+r,dangerouslySetInnerHTML:{__html:t},style:o},n)}}]),t}(l.Component);t.default=d,d.propTypes={style:l.PropTypes.object,svg:l.PropTypes.string,className:l.PropTypes.string},d.defaultProps={style:{},svg:"<svg></svg>",className:""}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(2),f=r(c),p=n(14),d=r(p),v=n(3),h=r(v),y=function(e){function t(){return i(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),u(t,[{key:"render",value:function(){var e=this.props,t=e.className,n=e.size,r=e.color,i=e.bgColor,s=o(e,["className","size","color","bgColor"]),a=Object.assign({},{fill:r,width:"100%",height:"100%"},this.props.style);return f.default.createElement("div",{className:d.default.svgIcon+" "+(t||""),style:{alignItems:"center",backgroundColor:i,display:"inline-flex",height:n,justifyContent:"center",width:n}},f.default.createElement(h.default,l({},s,{style:a})))}}]),t}(c.Component);t.default=y,y.propTypes={className:c.PropTypes.string,size:c.PropTypes.string,color:c.PropTypes.string,bgColor:c.PropTypes.string,style:c.PropTypes.object},y.defaultProps={size:"24px",color:"#000",bgColor:"transparent",style:{}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(2),c=r(u),f=n(15),p=r(f),d=n(12),v=r(d),h=n(4),y=r(h),m=function(e){function t(e){o(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={filterInputValue:"",filteredIcons:{}},n}return s(t,e),l(t,[{key:"componentWillMount",value:function(){this.setState({filteredIcons:this.props.icons})}},{key:"componentWillUnmount",value:function(){this.clearFilterInputTimeout()}},{key:"clearFilterInputTimeout",value:function(){this._filterInputTimeout&&clearTimeout(this._filterInputTimeout)}},{key:"filterIconsLists",value:function(e,t){return e.filter(function(e){return(0,v.default)(t.toLowerCase(),e.name.toLowerCase())})}},{key:"handleFilterInputChange",value:function(e){var t=this,n=e.target.value;this.clearFilterInputTimeout(),this._filterInputTimeout=setTimeout(function(){var e=t.filterIconsLists(t.props.icons,n);t.setState({filterInputValue:n,filteredIcons:e})},250)}},{key:"render",value:function(){var e=this.props,t=e.iconsProps,n=e.containerBgColor,r=this.state.filteredIcons,o={backgroundColor:n,color:t&&t.color||"#000"};return c.default.createElement("div",{className:p.default.svgIconsPreviewer},c.default.createElement("div",{className:p.default.filterInput},c.default.createElement("input",{className:"form-control",placeholder:"Search icons",onChange:this.handleFilterInputChange.bind(this)})),c.default.createElement("div",{className:p.default.itemsContainer},r.map(function(e,n){return c.default.createElement("div",{className:p.default.item,style:o,title:e.name.replace(/^svg/gi,""),key:n},c.default.createElement("div",{className:p.default.itemRenderer},c.default.createElement(y.default,a({svg:e.svg},t))),c.default.createElement("div",{className:p.default.itemName},c.default.createElement("span",null,e.name.replace(/^svg/gi,""))))})))}}]),t}(u.Component);t.default=m,m.propTypes={iconsProps:u.PropTypes.object,containerBgColor:u.PropTypes.string,icons:u.PropTypes.arrayOf(u.PropTypes.shape({name:u.PropTypes.string,svg:u.PropTypes.string}))},m.defaultProps={icons:[]}},function(e,t,n){t=e.exports=n(0)(),t.push([e.i,".SVG-module__svg__1-0-5_1be {\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.SVG-module__svg__1-0-5_1be svg {\n height: 100%;\n width: 100%;\n}\n",""]),t.locals={svg:"SVG-module__svg__1-0-5_1be"}},function(e,t,n){t=e.exports=n(0)(),t.push([e.i,".SVGIcon-module__svgIcon__1-0-5_1og {\n display: inline-flex;\n}\n",""]),t.locals={svgIcon:"SVGIcon-module__svgIcon__1-0-5_1og"}},function(e,t,n){t=e.exports=n(0)(),t.push([e.i,".SVGIconsPreviewer-module__itemsContainer__1-0-5_1n2 {\n display: flex;\n flex-wrap: wrap;\n border-top: 1px solid #eee;\n}\n.SVGIconsPreviewer-module__item__1-0-5_3uH {\n display: inline-flex;\n flex-direction: column;\n width: 20%;\n}\n.SVGIconsPreviewer-module__itemRenderer__1-0-5_17N {\n display: flex;\n padding: 12px;\n justify-content: center;\n align-items: center;\n}\n.SVGIconsPreviewer-module__itemName__1-0-5_2JY {\n padding: 4px 12px 8px;\n text-overflow: ellipsis;\n text-align: center;\n overflow: hidden;\n}\n.SVGIconsPreviewer-module__filterInput__1-0-5_rMI {\n max-width: 500px;\n margin: 0 auto 20px auto;\n}\n",""]),t.locals={itemsContainer:"SVGIconsPreviewer-module__itemsContainer__1-0-5_1n2",item:"SVGIconsPreviewer-module__item__1-0-5_3uH",itemRenderer:"SVGIconsPreviewer-module__itemRenderer__1-0-5_17N",itemName:"SVGIconsPreviewer-module__itemName__1-0-5_2JY",filterInput:"SVGIconsPreviewer-module__filterInput__1-0-5_rMI"}},function(e,t,n){"use strict";function r(e,t){var n=t.length,r=e.length;if(r>n)return!1;if(r===n)return e===t;e:for(var o=0,i=0;o<r;o++){for(var s=e.charCodeAt(o);i<n;)if(t.charCodeAt(i++)===s)continue e;return!1}return!0}e.exports=r},function(e,t,n){var r=n(9);"string"==typeof r&&(r=[[e.i,r,""]]);n(1)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){var r=n(10);"string"==typeof r&&(r=[[e.i,r,""]]);n(1)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){var r=n(11);"string"==typeof r&&(r=[[e.i,r,""]]);n(1)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){"use strict";e.exports={SVG:n(3).default,SVGIcon:n(4).default,SVGIconsPreviewer:n(5).default}}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-svg"]=t(require("react")):e["react-svg"]=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get: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,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=16)}([function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(e,t){function n(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=p[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(u(r.parts[i],t))}else{for(var a=[],i=0;i<r.parts.length;i++)a.push(u(r.parts[i],t));p[r.id]={id:r.id,refs:1,parts:a}}}}function r(e){for(var t=[],n={},r=0;r<e.length;r++){var o=e[r],i=o[0],a=o[1],s=o[2],u=o[3],l={css:a,media:s,sourceMap:u};n[i]?n[i].parts.push(l):t.push(n[i]={id:i,parts:[l]})}return t}function o(e,t){var n=h(),r=_[_.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),_.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function i(e){e.parentNode.removeChild(e);var t=_.indexOf(e);t>=0&&_.splice(t,1)}function a(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function u(e,t){var n,r,o;if(t.singleton){var u=y++;n=m||(m=a(t)),r=l.bind(null,n,u,!1),o=l.bind(null,n,u,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(t),r=f.bind(null,n),o=function(){i(n),n.href&&URL.revokeObjectURL(n.href)}):(n=a(t),r=c.bind(null,n),o=function(){i(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function l(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function c(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function f(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var p={},d=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}},v=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),h=d(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,y=0,_=[];e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},void 0===t.singleton&&(t.singleton=v()),void 0===t.insertAt&&(t.insertAt="bottom");var o=r(e);return n(o,t),function(e){for(var i=[],a=0;a<o.length;a++){var s=o[a],u=p[s.id];u.refs--,i.push(u)}if(e){n(r(e),t)}for(var a=0;a<i.length;a++){var u=i[a];if(0===u.refs){for(var l=0;l<u.parts.length;l++)u.parts[l]();delete p[u.id]}}}};var g=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=n(6).default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=n(7).default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=n(8).default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(2),f=r(c);n(13);var p=function(e){function t(){return i(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),l(t,[{key:"render",value:function(){var e=this.props,t=e.svg,n=e.children,r=e.className,i=o(e,["svg","children","className"]);return f.default.createElement("div",u({},i,{className:"oc-svg "+r,dangerouslySetInnerHTML:{__html:t}}),n)}}]),t}(c.Component);t.default=p,p.propTypes={style:c.PropTypes.object,svg:c.PropTypes.string,className:c.PropTypes.string},p.defaultProps={style:{},svg:"<svg></svg>",className:""}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(2),f=r(c);n(14);var p=n(3),d=r(p),v=function(e){function t(){return i(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),l(t,[{key:"render",value:function(){var e=this.props,t=e.className,n=e.svg,r=o(e,["className","svg"]);return f.default.createElement("div",u({},r,{className:"oc-svg-icon "+t}),f.default.createElement(d.default,{className:"oc-svg-icon__svg",svg:n}))}}]),t}(c.Component);t.default=v,v.propTypes={className:c.PropTypes.string,style:c.PropTypes.object},v.defaultProps={className:"",style:{}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(2),c=r(l),f=n(15),p=r(f),d=n(12),v=r(d),h=n(4),m=r(h),y=function(e){function t(e){o(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={filterInputValue:"",filteredIcons:{}},n}return a(t,e),u(t,[{key:"componentWillMount",value:function(){this.setState({filteredIcons:this.props.icons})}},{key:"componentWillUnmount",value:function(){this.clearFilterInputTimeout()}},{key:"clearFilterInputTimeout",value:function(){this._filterInputTimeout&&clearTimeout(this._filterInputTimeout)}},{key:"filterIconsLists",value:function(e,t){return e.filter(function(e){return(0,v.default)(t.toLowerCase(),e.name.toLowerCase())})}},{key:"handleFilterInputChange",value:function(e){var t=this,n=e.target.value;this.clearFilterInputTimeout(),this._filterInputTimeout=setTimeout(function(){var e=t.filterIconsLists(t.props.icons,n);t.setState({filterInputValue:n,filteredIcons:e})},250)}},{key:"render",value:function(){var e=this.props,t=e.iconsProps,n=e.containerBgColor,r=this.state.filteredIcons,o={backgroundColor:n,color:t&&t.color||"#000"};return c.default.createElement("div",{className:p.default.svgIconsPreviewer},c.default.createElement("div",{className:p.default.filterInput},c.default.createElement("input",{className:"form-control",placeholder:"Search icons",onChange:this.handleFilterInputChange.bind(this)})),c.default.createElement("div",{className:p.default.itemsContainer},r.map(function(e,n){return c.default.createElement("div",{className:p.default.item,style:o,title:e.name.replace(/^svg/gi,""),key:n},c.default.createElement("div",{className:p.default.itemRenderer},c.default.createElement(m.default,s({svg:e.svg},t))),c.default.createElement("div",{className:p.default.itemName},c.default.createElement("span",null,e.name.replace(/^svg/gi,""))))})))}}]),t}(l.Component);t.default=y,y.propTypes={iconsProps:l.PropTypes.object,containerBgColor:l.PropTypes.string,icons:l.PropTypes.arrayOf(l.PropTypes.shape({name:l.PropTypes.string,svg:l.PropTypes.string}))},y.defaultProps={icons:[]}},function(e,t,n){t=e.exports=n(0)(),t.push([e.i,".oc-svg {\n display: inline-flex;\n width: 24px;\n height: 24px;\n}\n.oc-svg svg {\n height: 100%;\n width: 100%;\n}\n",""])},function(e,t,n){t=e.exports=n(0)(),t.push([e.i,".oc-svg-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n}\n.oc-svg-icon__svg {\n width: 100%;\n height: 100%;\n}\n",""])},function(e,t,n){t=e.exports=n(0)(),t.push([e.i,".SVGIconsPreviewer-module__itemsContainer__2-0-0_1n2 {\n display: flex;\n flex-wrap: wrap;\n border-top: 1px solid #eee;\n}\n.SVGIconsPreviewer-module__item__2-0-0_3uH {\n display: inline-flex;\n flex-direction: column;\n width: 20%;\n}\n.SVGIconsPreviewer-module__itemRenderer__2-0-0_17N {\n display: flex;\n padding: 12px;\n justify-content: center;\n align-items: center;\n}\n.SVGIconsPreviewer-module__itemName__2-0-0_2JY {\n padding: 4px 12px 8px;\n text-overflow: ellipsis;\n text-align: center;\n overflow: hidden;\n}\n.SVGIconsPreviewer-module__filterInput__2-0-0_rMI {\n max-width: 500px;\n margin: 0 auto 20px auto;\n}\n",""]),t.locals={itemsContainer:"SVGIconsPreviewer-module__itemsContainer__2-0-0_1n2",item:"SVGIconsPreviewer-module__item__2-0-0_3uH",itemRenderer:"SVGIconsPreviewer-module__itemRenderer__2-0-0_17N",itemName:"SVGIconsPreviewer-module__itemName__2-0-0_2JY",filterInput:"SVGIconsPreviewer-module__filterInput__2-0-0_rMI"}},function(e,t,n){"use strict";function r(e,t){var n=t.length,r=e.length;if(r>n)return!1;if(r===n)return e===t;e:for(var o=0,i=0;o<r;o++){for(var a=e.charCodeAt(o);i<n;)if(t.charCodeAt(i++)===a)continue e;return!1}return!0}e.exports=r},function(e,t,n){var r=n(9);"string"==typeof r&&(r=[[e.i,r,""]]);n(1)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){var r=n(10);"string"==typeof r&&(r=[[e.i,r,""]]);n(1)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){var r=n(11);"string"==typeof r&&(r=[[e.i,r,""]]);n(1)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){"use strict";e.exports={SVG:n(3).default,SVGIcon:n(4).default,SVGIconsPreviewer:n(5).default}}])});

23

lib/SVG/SVG.react.js

@@ -8,2 +8,4 @@ 'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

@@ -15,8 +17,8 @@

var _SVGModule = require('./SVG.module.less');
require('./SVG.less');
var _SVGModule2 = _interopRequireDefault(_SVGModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -28,4 +30,2 @@

var defaultStyle = { height: '24px', width: '24px' };
var SVG = function (_Component) {

@@ -46,12 +46,11 @@ _inherits(SVG, _Component);

children = _props.children,
className = _props.className;
className = _props.className,
restProps = _objectWithoutProperties(_props, ['svg', 'children', 'className']);
var style = Object.assign({}, defaultStyle, this.props.style);
return _react2.default.createElement(
'div',
{
className: _SVGModule2.default.svg + ' ' + className,
dangerouslySetInnerHTML: { __html: svg },
style: style
},
_extends({}, restProps, {
className: 'oc-svg ' + className,
dangerouslySetInnerHTML: { __html: svg }
}),
children

@@ -58,0 +57,0 @@ );

36

lib/SVGIcon/SVGIcon.DOCUMENTATION.md

@@ -15,5 +15,32 @@ ### Component Name

<SVGIcon svg={_scope.getIcon('cancel')} />
<SVGIcon svg={_scope.getIcon('work')} color="#fff" bgColor="#42A5F5" />
<SVGIcon svg={_scope.getIcon('monetization_on')} color="#fff" bgColor="#66BB6A" size="48px" />
<SVGIcon svg={_scope.getIcon('access_alarm')} color="#fff" bgColor="#FF3D00" size="72px" />
<SVGIcon
svg={_scope.getIcon('work')}
style={{
fill: '#fff',
backgroundColor: '#42A5F5',
width: '48px',
height: '48px'
}}
/>
<SVGIcon
svg={_scope.getIcon('monetization_on')}
style={{
fill: '#fff',
backgroundColor: '#66BB6A',
width: '48px',
height: '48px'
}}
/>
<SVGIcon
svg={_scope.getIcon('access_alarm')}
style={{
fill: '#fff',
backgroundColor: '#FF3D00',
width: '72px',
height: '72px'
}}
/>
</div>

@@ -26,5 +53,2 @@ ```

| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| bgColor | string | Background color. Example: `#e70` |
| color | string | Fill color. Example: `#fff` |
| size | string | Size. Example: `48px` |
| svg | string | SVG content string. Example: `<svg viewBox="0 0 120 120" version="1.1"><circle cx="60" cy="60" r="50"/></svg>` |

@@ -31,0 +55,0 @@

34

lib/SVGIcon/SVGIcon.react.js

@@ -16,6 +16,4 @@ 'use strict';

var _SVGIconModule = require('./SVGIcon.module.less');
require('./SVGIcon.less');
var _SVGIconModule2 = _interopRequireDefault(_SVGIconModule);
var _SVG = require('../SVG');

@@ -50,22 +48,11 @@

className = _props.className,
size = _props.size,
color = _props.color,
bgColor = _props.bgColor,
restProps = _objectWithoutProperties(_props, ['className', 'size', 'color', 'bgColor']);
svg = _props.svg,
restProps = _objectWithoutProperties(_props, ['className', 'svg']);
var style = Object.assign({}, { fill: color, width: '100%', height: '100%' }, this.props.style);
return _react2.default.createElement(
'div',
{
className: _SVGIconModule2.default.svgIcon + ' ' + (className || ''),
style: {
alignItems: 'center',
backgroundColor: bgColor,
display: 'inline-flex',
height: size,
justifyContent: 'center',
width: size
}
},
_react2.default.createElement(_SVG2.default, _extends({}, restProps, { style: style }))
_extends({}, restProps, {
className: 'oc-svg-icon ' + className
}),
_react2.default.createElement(_SVG2.default, { className: 'oc-svg-icon__svg', svg: svg })
);

@@ -83,12 +70,7 @@ }

className: _react.PropTypes.string,
size: _react.PropTypes.string,
color: _react.PropTypes.string,
bgColor: _react.PropTypes.string,
style: _react.PropTypes.object
};
SVGIcon.defaultProps = {
size: '24px',
color: '#000',
bgColor: 'transparent',
className: '',
style: {}
};

2

package.json
{
"name": "@opuscapita/react-svg",
"version": "1.0.5",
"version": "2.0.0",
"description": "React components for SVG (Scalable Vector Graphic).",

@@ -5,0 +5,0 @@ "scripts": {

lib/SVG/SVG.module.less
lib/SVGIcon/SVGIcon.module.less