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',