From f403027ae3700274124a2870e4016ae80b3a932b Mon Sep 17 00:00:00 2001 From: Paul T Date: Sat, 30 Jun 2018 16:10:38 -0400 Subject: [PATCH] Bug fixes to css + Docs + output custom element bundle to `dist/` folder --- README.md | 42 ++++++++++++++++++++++++++++++++++++++++ dist/box-icon-element.js | 2 ++ src/box-icon-element.js | 11 +++++++++-- webpack.config.js | 2 ++ 4 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 dist/box-icon-element.js diff --git a/README.md b/README.md index 9c39d05..91bb636 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ import 'boxicons/css/boxicons.css'; ``` ## Usage +### Using via CSS + 1. Include the stylesheet on your document's `` ```html @@ -60,6 +62,46 @@ Instead of installing you may use the remote version [Check out all the icons here!](https://boxicons.com) +### Using via Web Component + +Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the `box-icon-element.js` file to the page: + +```html + +``` + +To use an icon, add the `` element to the location where the icon should be displayed: + +```html + +``` + +The `` custom element supports the following attributes: + +```html + +``` + +- `name` : (REQUIRED) the name of the icon to be displayed +- `color`: A color for the icon. +- `size`: The size for the icon. It supports one of two types of values: + - One of the followign shortcuts: `xs`, `sm`, `md`, `lg` + - A css unit size (ex. `60px`) +- `rotate`: one of the following values: `90`, `180`, `270` +- `flip`: one of the following values: `horizontal`, `vertical` +- `shape`: one of the following values: `square`, `circle` +- `animation`: One of the following values: `spin`, `tada`, `flashing`, `burst`, `fade-left`, `fade-right`, `spin-hover`, `tada-hover`, `flashing-hover`, `burst-hover`, `fade-left-hover`, `fade-right-hover` + + + ## License [You can read the license here!](https://boxicons.com/get-started#license) diff --git a/dist/box-icon-element.js b/dist/box-icon-element.js new file mode 100644 index 0000000..b1f67a2 --- /dev/null +++ b/dist/box-icon-element.js @@ -0,0 +1,2 @@ +!function(t,e,n,r,o){function a(){var t=[];return t.isDone=!1,t.exec=function(){t.splice(0).forEach(function(t){t()})},t.then=function(e){return t.isDone?e():t.push(e),t},t}function i(t){var e=a(),n=r.createElement("script");return n.type="text/javascript",n.readyState?n.onreadystatechange=function(){"loaded"!=n.readyState&&"complete"!=n.readyState||(n.onreadystatechange=null,e.isDone=!0,e.exec())}:n.onload=function(){e.isDone=!0,e.exec()},n.src=t,r.getElementsByTagName("head")[0].appendChild(n),n.then=e.then,n}if("customElements"in n)o();else{if(n.AWAITING_WEB_COMPONENTS_POLYFILL)return void n.AWAITING_WEB_COMPONENTS_POLYFILL.then(o);var s=n.AWAITING_WEB_COMPONENTS_POLYFILL=a();s.then(o);var c=n.WEB_COMPONENTS_POLYFILL||"//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js",f=n.ES6_CORE_POLYFILL||"//cdnjs.cloudflare.com/ajax/libs/core-js/2.5.3/core.min.js";"Promise"in n?i(c).then(function(){s.isDone=!0,s.exec()}):i(f).then(function(){i(c).then(function(){s.isDone=!0,s.exec()})})}}(0,0,window,document,function(){!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}\n:host #icon {\n width: 1em;\n height: 1em;\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:host([shape=square]) #icon {\n padding: .25em;\n border: .07em solid rgba(0,0,0,.1);\n border-radius: .25em;\n}\n:host([shape=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"+f.a+"\n"+u.a+'\n\n
';var w=p(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(y.content,!0)),g()&&b.ShadyCSS.styleElement(t),t._state={$iconHolder:t.$ui.getElementById("icon")},t}return a(e,t),d(e,null,[{key:"getIconSvg",value:function(t){var e=this.cdnUrl+"/"+t+".svg";return e&&h[e]?h[e]:(h[e]=new Promise(function(t,n){var r=new XMLHttpRequest;r.addEventListener("load",function(){if(this.status<200||this.status>=300)return void n(new Error(this.status+" "+this.responseText));t(this.responseText)}),r.onerror=n,r.onabort=n,r.open("GET",e),r.send()}),h[e])}},{key:"define",value:function(t){t=t||this.tagName,g()&&b.ShadyCSS.prepareTemplate(y,t),customElements.define(t,this)}},{key:"cdnUrl",get:function(){return"https://unpkg.com/boxicons@1.1.1/svg"}},{key:"tagName",get:function(){return"box-icon"}},{key:"observedAttributes",get:function(){return["name","color","size","rotate","flip","animation","shape"]}}]),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":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(){g()&&b.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 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-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=box-icon-element.js.map \ No newline at end of file diff --git a/src/box-icon-element.js b/src/box-icon-element.js index d001705..0d7c4da 100644 --- a/src/box-icon-element.js +++ b/src/box-icon-element.js @@ -16,6 +16,10 @@ TEMPLATE.innerHTML = ` diff --git a/webpack.config.js b/webpack.config.js index 1646c40..1ad7e4b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,4 @@ +const path = require('path'); const webpack = require('webpack'); const WrapperPlugin = require('wrapper-webpack-plugin'); const packageJson = require('./package.json'); @@ -5,6 +6,7 @@ const packageJson = require('./package.json'); module.exports = { entry: `${__dirname}/src/index.js`, output: { + path: path.resolve(__dirname, 'dist'), library: 'BoxIconElement', libraryTarget: 'umd', filename: 'box-icon-element.js',