diff --git a/README.md b/README.md index c1209f6..0688c88 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ _High Quality web friendly icons_ 'Boxicons' is a carefully designed open source iconset with 700+ icons. It's crafted to look enrich your website/app experience. -_Announcing Boxicons v1.5.2!_ +_Announcing Boxicons v1.5.3!_ Load the icons as web component , load only the icons you need . diff --git a/dist/boxicons.js b/dist/boxicons.js index 43170a0..f93b38b 100644 --- a/dist/boxicons.js +++ b/dist/boxicons.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.BoxIconElement=e():t.BoxIconElement=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var a=r(o);return[n].concat(o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"})).concat([a]).join("\n")}return[n].join("\n")}function r(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o\n:host {\n display: inline-block;\n font-size: initial;\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n}\n:host([size=xs]) {\n width: 0.8rem;\n height: 0.8rem;\n}\n:host([size=sm]) {\n width: 1.55rem;\n height: 1.55rem;\n}\n:host([size=md]) {\n width: 2.25rem;\n height: 2.25rem;\n}\n:host([size=lg]) {\n width: 3.0rem;\n height: 3.0rem;\n}\n\n:host([size]:not([size=""]):not([size=xs]):not([size=sm]):not([size=md]):not([size=lg])) {\n width: auto;\n height: auto;\n}\n:host([pull=left]) #icon {\n float: left;\n margin-right: .3em!important;\n}\n:host([pull=right]) #icon {\n float: right;\n margin-left: .3em!important;\n}\n:host([border=square]) #icon {\n padding: .25em;\n border: .07em solid rgba(0,0,0,.1);\n border-radius: .25em;\n}\n:host([border=circle]) #icon {\n padding: .25em;\n border: .07em solid rgba(0,0,0,.1);\n border-radius: 50%;\n}\n#icon,\nsvg {\n width: 100%;\n height: 100%;\n}\n#icon {\n box-sizing: border-box;\n} \n'+c.a+"\n"+u.a+'\n\n
';var w=b(function(t){function e(){r(this,e);var t=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.$ui=t.attachShadow({mode:"open"}),t.$ui.appendChild(t.ownerDocument.importNode(g.content,!0)),k()&&y.ShadyCSS.styleElement(t),t._state={$iconHolder:t.$ui.getElementById("icon")},t}return a(e,t),d(e,null,[{key:"getIconSvg",value:function(t,e){var n=this.cdnUrl+"/regular/bx-"+t+".svg";return console.log(e),"solid"===e?n=this.cdnUrl+"/solid/bxs-"+t+".svg":"logo"===e&&(n=this.cdnUrl+"/logos/bxl-"+t+".svg"),n&&h[n]?h[n]:(h[n]=new Promise(function(t,e){var r=new XMLHttpRequest;r.addEventListener("load",function(){if(this.status<200||this.status>=300)return void e(new Error(this.status+" "+this.responseText));t(this.responseText)}),r.onerror=e,r.onabort=e,r.open("GET",n),r.send()}),h[n])}},{key:"define",value:function(t){t=t||this.tagName,k()&&y.ShadyCSS.prepareTemplate(g,t),customElements.define(t,this)}},{key:"cdnUrl",get:function(){return"//unpkg.com/boxicons@latest/svg"}},{key:"tagName",get:function(){return"box-icon"}},{key:"observedAttributes",get:function(){return["name","color","size","type","rotate","flip","animation","border","pull"]}}]),d(e,[{key:"attributeChangedCallback",value:function(t,e,n){var r=this._state.$iconHolder;switch(t){case"name":i(this,e,n);break;case"color":r.style.fill=n||"";break;case"size":f(this,e,n);break;case"type":s(this,e,n);break;case"rotate":e&&r.classList.remove("bx-rotate-"+e),n&&r.classList.add("bx-rotate-"+n);break;case"flip":e&&r.classList.remove("bx-flip-"+e),n&&r.classList.add("bx-flip-"+n);break;case"animation":e&&r.classList.remove("bx-"+e),n&&r.classList.add("bx-"+n)}}},{key:"connectedCallback",value:function(){k()&&y.ShadyCSS.styleElement(this)}}]),e}(HTMLElement))},function(t,e,n){var r=n(4);t.exports="string"==typeof r?r:r.toString()},function(t,e,n){e=t.exports=n(0)(!1),e.push([t.i,"@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes burst{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}90%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@keyframes burst{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}90%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@-webkit-keyframes flashing{0%{opacity:1}45%{opacity:0}90%{opacity:1}}@keyframes flashing{0%{opacity:1}45%{opacity:0}90%{opacity:1}}@-webkit-keyframes fade-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}}@keyframes fade-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}}@-webkit-keyframes fade-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0}}@keyframes fade-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0}}@-webkit-keyframes fade-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}}@keyframes fade-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}}@-webkit-keyframes fade-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}}@keyframes fade-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.95,.95,.95) rotate(-10deg);transform:scale3d(.95,.95,.95) rotate(-10deg)}30%,50%,70%,90%{-webkit-transform:scaleX(1) rotate(10deg);transform:scaleX(1) rotate(10deg)}40%,60%,80%{-webkit-transform:scaleX(1) rotate(-10deg);transform:scaleX(1) rotate(-10deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.95,.95,.95) rotate(-10deg);transform:scale3d(.95,.95,.95) rotate(-10deg)}30%,50%,70%,90%{-webkit-transform:scaleX(1) rotate(10deg);transform:scaleX(1) rotate(10deg)}40%,60%,80%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.bx-spin,.bx-spin-hover:hover{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}.bx-tada,.bx-tada-hover:hover{-webkit-animation:tada 1.5s ease infinite;animation:tada 1.5s ease infinite}.bx-flashing,.bx-flashing-hover:hover{-webkit-animation:flashing 1.5s infinite linear;animation:flashing 1.5s infinite linear}.bx-burst,.bx-burst-hover:hover{-webkit-animation:burst 1.5s infinite linear;animation:burst 1.5s infinite linear}.bx-fade-up,.bx-fade-up-hover:hover{-webkit-animation:fade-up 1.5s infinite linear;animation:fade-up 1.5s infinite linear}.bx-fade-down,.bx-fade-down-hover:hover{-webkit-animation:fade-down 1.5s infinite linear;animation:fade-down 1.5s infinite linear}.bx-fade-left,.bx-fade-left-hover:hover{-webkit-animation:fade-left 1.5s infinite linear;animation:fade-left 1.5s infinite linear}.bx-fade-right,.bx-fade-right-hover:hover{-webkit-animation:fade-right 1.5s infinite linear;animation:fade-right 1.5s infinite linear}",""])},function(t,e,n){var r=n(6);t.exports="string"==typeof r?r:r.toString()},function(t,e,n){e=t.exports=n(0)(!1),e.push([t.i,'.bx-rotate-90{transform:rotate(90deg);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"}.bx-rotate-180{transform:rotate(180deg);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"}.bx-rotate-270{transform:rotate(270deg);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"}.bx-flip-horizontal{transform:scaleX(-1);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"}.bx-flip-vertical{transform:scaleY(-1);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}',""])}])}); +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.BoxIconElement=e():t.BoxIconElement=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var a=r(o);return[n].concat(o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"})).concat([a]).join("\n")}return[n].join("\n")}function r(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o\n:host {\n display: inline-block;\n font-size: initial;\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n}\n:host([size=xs]) {\n width: 0.8rem;\n height: 0.8rem;\n}\n:host([size=sm]) {\n width: 1.55rem;\n height: 1.55rem;\n}\n:host([size=md]) {\n width: 2.25rem;\n height: 2.25rem;\n}\n:host([size=lg]) {\n width: 3.0rem;\n height: 3.0rem;\n}\n\n:host([size]:not([size=""]):not([size=xs]):not([size=sm]):not([size=md]):not([size=lg])) {\n width: auto;\n height: auto;\n}\n:host([pull=left]) #icon {\n float: left;\n margin-right: .3em!important;\n}\n:host([pull=right]) #icon {\n float: right;\n margin-left: .3em!important;\n}\n:host([border=square]) #icon {\n padding: .25em;\n border: .07em solid rgba(0,0,0,.1);\n border-radius: .25em;\n}\n:host([border=circle]) #icon {\n padding: .25em;\n border: .07em solid rgba(0,0,0,.1);\n border-radius: 50%;\n}\n#icon,\nsvg {\n width: 100%;\n height: 100%;\n}\n#icon {\n box-sizing: border-box;\n} \n'+l.a+"\n"+u.a+'\n\n
';var w=b(function(t){function e(){r(this,e);var t=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.$ui=t.attachShadow({mode:"open"}),t.$ui.appendChild(t.ownerDocument.importNode(g.content,!0)),k()&&y.ShadyCSS.styleElement(t),t._state={$iconHolder:t.$ui.getElementById("icon")},t}return a(e,t),d(e,null,[{key:"getIconSvg",value:function(t,e){var n=this.cdnUrl+"/regular/bx-"+t+".svg";return"solid"===e?n=this.cdnUrl+"/solid/bxs-"+t+".svg":"logo"===e&&(n=this.cdnUrl+"/logos/bxl-"+t+".svg"),n&&h[n]?h[n]:(h[n]=new Promise(function(t,e){var r=new XMLHttpRequest;r.addEventListener("load",function(){if(this.status<200||this.status>=300)return void e(new Error(this.status+" "+this.responseText));t(this.responseText)}),r.onerror=e,r.onabort=e,r.open("GET",n),r.send()}),h[n])}},{key:"define",value:function(t){t=t||this.tagName,k()&&y.ShadyCSS.prepareTemplate(g,t),customElements.define(t,this)}},{key:"cdnUrl",get:function(){return"//unpkg.com/boxicons@latest/svg"}},{key:"tagName",get:function(){return"box-icon"}},{key:"observedAttributes",get:function(){return["type","name","color","size","rotate","flip","animation","border","pull"]}}]),d(e,[{key:"attributeChangedCallback",value:function(t,e,n){var r=this._state.$iconHolder;switch(t){case"type":i(this,e,n);break;case"name":s(this,e,n);break;case"color":r.style.fill=n||"";break;case"size":f(this,e,n);break;case"rotate":e&&r.classList.remove("bx-rotate-"+e),n&&r.classList.add("bx-rotate-"+n);break;case"flip":e&&r.classList.remove("bx-flip-"+e),n&&r.classList.add("bx-flip-"+n);break;case"animation":e&&r.classList.remove("bx-"+e),n&&r.classList.add("bx-"+n)}}},{key:"connectedCallback",value:function(){k()&&y.ShadyCSS.styleElement(this)}}]),e}(HTMLElement))},function(t,e,n){var r=n(4);t.exports="string"==typeof r?r:r.toString()},function(t,e,n){e=t.exports=n(0)(!1),e.push([t.i,"@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes burst{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}90%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@keyframes burst{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}90%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@-webkit-keyframes flashing{0%{opacity:1}45%{opacity:0}90%{opacity:1}}@keyframes flashing{0%{opacity:1}45%{opacity:0}90%{opacity:1}}@-webkit-keyframes fade-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}}@keyframes fade-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}}@-webkit-keyframes fade-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0}}@keyframes fade-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0}}@-webkit-keyframes fade-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}}@keyframes fade-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}}@-webkit-keyframes fade-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}}@keyframes fade-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.95,.95,.95) rotate(-10deg);transform:scale3d(.95,.95,.95) rotate(-10deg)}30%,50%,70%,90%{-webkit-transform:scaleX(1) rotate(10deg);transform:scaleX(1) rotate(10deg)}40%,60%,80%{-webkit-transform:scaleX(1) rotate(-10deg);transform:scaleX(1) rotate(-10deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.95,.95,.95) rotate(-10deg);transform:scale3d(.95,.95,.95) rotate(-10deg)}30%,50%,70%,90%{-webkit-transform:scaleX(1) rotate(10deg);transform:scaleX(1) rotate(10deg)}40%,60%,80%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.bx-spin,.bx-spin-hover:hover{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}.bx-tada,.bx-tada-hover:hover{-webkit-animation:tada 1.5s ease infinite;animation:tada 1.5s ease infinite}.bx-flashing,.bx-flashing-hover:hover{-webkit-animation:flashing 1.5s infinite linear;animation:flashing 1.5s infinite linear}.bx-burst,.bx-burst-hover:hover{-webkit-animation:burst 1.5s infinite linear;animation:burst 1.5s infinite linear}.bx-fade-up,.bx-fade-up-hover:hover{-webkit-animation:fade-up 1.5s infinite linear;animation:fade-up 1.5s infinite linear}.bx-fade-down,.bx-fade-down-hover:hover{-webkit-animation:fade-down 1.5s infinite linear;animation:fade-down 1.5s infinite linear}.bx-fade-left,.bx-fade-left-hover:hover{-webkit-animation:fade-left 1.5s infinite linear;animation:fade-left 1.5s infinite linear}.bx-fade-right,.bx-fade-right-hover:hover{-webkit-animation:fade-right 1.5s infinite linear;animation:fade-right 1.5s infinite linear}",""])},function(t,e,n){var r=n(6);t.exports="string"==typeof r?r:r.toString()},function(t,e,n){e=t.exports=n(0)(!1),e.push([t.i,'.bx-rotate-90{transform:rotate(90deg);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"}.bx-rotate-180{transform:rotate(180deg);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"}.bx-rotate-270{transform:rotate(270deg);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"}.bx-flip-horizontal{transform:scaleX(-1);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"}.bx-flip-vertical{transform:scaleY(-1);-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}',""])}])}); //# sourceMappingURL=boxicons.js.map \ No newline at end of file diff --git a/index.html b/index.html index 27f9f35..5cf38c5 100644 --- a/index.html +++ b/index.html @@ -75,6 +75,6 @@
- + diff --git a/src/box-icon-element.js b/src/box-icon-element.js index 713b99b..40f26d8 100644 --- a/src/box-icon-element.js +++ b/src/box-icon-element.js @@ -91,10 +91,10 @@ export class BoxIconElement extends HTMLElement { static get observedAttributes() { return [ + 'type', 'name', 'color', 'size', - 'type', 'rotate', 'flip', 'animation', @@ -113,7 +113,6 @@ export class BoxIconElement extends HTMLElement { */ static getIconSvg(iconName,type) { var iconUrl = `${this.cdnUrl}/regular/bx-${iconName}.svg`; - console.log(type); if(type==='solid'){ iconUrl = `${this.cdnUrl}/solid/bxs-${iconName}.svg`; } @@ -169,6 +168,10 @@ export class BoxIconElement extends HTMLElement { const $iconHolder = this._state.$iconHolder; switch (attr) { + + case 'type': + handleTypeChange(this, oldVal, newVal); + break; case 'name': handleNameChange(this, oldVal, newVal); break; @@ -178,9 +181,6 @@ export class BoxIconElement extends HTMLElement { case 'size': handleSizeChange(this, oldVal, newVal); break; - case 'type': - handleTypeChange(this, oldVal, newVal); - break; case 'rotate': if (oldVal) { $iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`); @@ -214,27 +214,9 @@ export class BoxIconElement extends HTMLElement { } } } - -function handleNameChange(inst, oldVal, newVal) { - const state = inst._state; - state.currentName = newVal; - state.$iconHolder.textContent = ''; - - if (newVal) { - inst.constructor.getIconSvg(newVal,state.type) - .then((iconData) => { - if (state.currentName === newVal) { - state.$iconHolder.innerHTML = iconData; - } - }) - .catch((error) => { - console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line - }); - } -} function handleTypeChange(inst, oldVal, newVal) { const state = inst._state; - + state.$iconHolder.textContent = ''; if (state.type) { state.type = null; } @@ -245,7 +227,36 @@ function handleTypeChange(inst, oldVal, newVal) { else{ state.type = 'regular'; } + if(state.currentName!== undefined){ + inst.constructor.getIconSvg(state.currentName,state.type) + .then((iconData) => { + if (state.type === newVal) { + state.$iconHolder.innerHTML = iconData; + } + }) + .catch((error) => { + console.error(`Failed to load icon: ${state.currentName + "\n"}${error}`); //eslint-disable-line + });} } +function handleNameChange(inst, oldVal, newVal) { + const state = inst._state; + state.currentName = newVal; + state.$iconHolder.textContent = ''; + + if (newVal) { + if(state.type!== undefined){ + inst.constructor.getIconSvg(newVal,state.type) + .then((iconData) => { + if (state.currentName === newVal) { + state.$iconHolder.innerHTML = iconData; + } + }) + .catch((error) => { + console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line + });} + } +} + function handleSizeChange(inst, oldVal, newVal) { const state = inst._state; diff --git a/static/boxicons-1.5.2.zip b/static/boxicons-1.5.3.zip similarity index 100% rename from static/boxicons-1.5.2.zip rename to static/boxicons-1.5.3.zip diff --git a/static/dist/0.bundle.js b/static/dist/0.bundle.js index 873f54f..df91392 100644 --- a/static/dist/0.bundle.js +++ b/static/dist/0.bundle.js @@ -1,2 +1,2 @@ -webpackJsonp([0],{455:function(e,t,a){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(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});var c=function(){function e(e,t){for(var a=0;a",u.default.createElement("br",null),"\x3c!-- or --\x3e"," ",u.default.createElement("br",null),"")),u.default.createElement("p",null,"This will load boxicons font into your webpage")),u.default.createElement("h4",{id:"html"},"HTML"),u.default.createElement("div",null,u.default.createElement("p",null," To use an icon on your page, add a prefix",u.default.createElement("code",{className:"side"},"bx-")," for regular icons, ",u.default.createElement("code",{className:"side"},"bxs-")," for solid icons & ",u.default.createElement("code",{className:"side"},"bxl-")," for logos followed by the icon name and seperate class with the",u.default.createElement("code",{className:"side"},"bx"),":")," ",u.default.createElement("pre",null," ",u.default.createElement("code",{className:"html"},"",u.default.createElement("br",null),"",u.default.createElement("br",null),"")),"You can see the names of all the icons ",u.default.createElement(o.Link,{to:"/cheatsheet"},"here")),u.default.createElement("h3",{id:"install-via-npm"},"Install via NPM"),u.default.createElement("div",null,u.default.createElement("p",null," Install the boxicons package by copy pasting the following in your terminal:"),u.default.createElement("pre",null," ",u.default.createElement("code",null,"$ npm install boxicons --save")),u.default.createElement("p",null," Import the npm module in your javascript"),u.default.createElement("pre",null," ",u.default.createElement("code",{className:"javascript"},"import 'boxicons/css/boxicons.min.css'"))),u.default.createElement("h3",{id:"web-component"},"Using the Web Component"),u.default.createElement("div",null,u.default.createElement("p",null,"Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the ",u.default.createElement("code",{className:"side"},"boxicons.js")," file to the page:"),u.default.createElement("pre",null," ",u.default.createElement("code",{className:"html"},'