';var t=n.firstElementChild;document.body.appendChild(t);var i=t.firstElementChild;t.scrollLeft=0;var r=e.getOffset(t),o=e.getOffset(i);t.scrollLeft=999;var a=e.getOffset(i);return{isRtlScrollingInverted:r.left!==o.left&&o.left-a.left!=0,isRtlScrollbarInverted:r.left!==o.left}}},{key:"initHtmlApi",value:function(){this.initDOMLoadedElements=this.initDOMLoadedElements.bind(this),"undefined"!=typeof MutationObserver&&(this.globalObserver=new MutationObserver(function(n){n.forEach(function(n){Array.from(n.addedNodes).forEach(function(n){1===n.nodeType&&(n.hasAttribute("data-simplebar")?!n.SimpleBar&&new e(n,e.getElOptions(n)):Array.from(n.querySelectorAll("[data-simplebar]")).forEach(function(n){!n.SimpleBar&&new e(n,e.getElOptions(n))}))}),Array.from(n.removedNodes).forEach(function(e){1===e.nodeType&&(e.hasAttribute("data-simplebar")?e.SimpleBar&&e.SimpleBar.unMount():Array.from(e.querySelectorAll("[data-simplebar]")).forEach(function(e){e.SimpleBar&&e.SimpleBar.unMount()}))})})}),this.globalObserver.observe(document,{childList:!0,subtree:!0})),"complete"===document.readyState||"loading"!==document.readyState&&!document.documentElement.doScroll?window.setTimeout(this.initDOMLoadedElements):(document.addEventListener("DOMContentLoaded",this.initDOMLoadedElements),window.addEventListener("load",this.initDOMLoadedElements))}},{key:"getElOptions",value:function(e){return Array.from(e.attributes).reduce(function(e,n){var t=n.name.match(/data-simplebar-(.+)/);if(t){var i=t[1].replace(/\W+(.)/g,function(e,n){return n.toUpperCase()});switch(n.value){case"true":e[i]=!0;break;case"false":e[i]=!1;break;case void 0:e[i]=!0;break;default:e[i]=n.value}}return e},{})}},{key:"removeObserver",value:function(){this.globalObserver.disconnect()}},{key:"initDOMLoadedElements",value:function(){document.removeEventListener("DOMContentLoaded",this.initDOMLoadedElements),window.removeEventListener("load",this.initDOMLoadedElements),Array.from(document.querySelectorAll("[data-simplebar]")).forEach(function(n){n.SimpleBar||new e(n,e.getElOptions(n))})}},{key:"getOffset",value:function(e){var n=e.getBoundingClientRect();return{top:n.top+(window.pageYOffset||document.documentElement.scrollTop),left:n.left+(window.pageXOffset||document.documentElement.scrollLeft)}}}]),e}();k.defaultOptions={autoHide:!0,forceVisible:!1,classNames:{content:"simplebar-content",offset:"simplebar-offset",mask:"simplebar-mask",wrapper:"simplebar-wrapper",placeholder:"simplebar-placeholder",scrollbar:"simplebar-scrollbar",track:"simplebar-track",heightAutoObserverWrapperEl:"simplebar-height-auto-observer-wrapper",heightAutoObserverEl:"simplebar-height-auto-observer",visible:"simplebar-visible",horizontal:"simplebar-horizontal",vertical:"simplebar-vertical",hover:"simplebar-hover"},scrollbarMinSize:25,scrollbarMaxSize:0,timeout:1e3},_.a&&k.initHtmlApi()},578:function(e,n,t){var i,r,o;/*! scrollbarWidth.js v0.1.3 | felixexter | MIT | https://github.com/felixexter/scrollbarWidth */
-!function(t,a){r=[],i=a,void 0!==(o="function"==typeof i?i.apply(n,r):i)&&(e.exports=o)}(0,function(){"use strict";function e(){if("undefined"==typeof document)return 0;var e,n=document.body,t=document.createElement("div"),i=t.style;return i.position="absolute",i.top=i.left="-9999px",i.width=i.height="100px",i.overflow="scroll",n.appendChild(t),e=t.offsetWidth-t.clientWidth,n.removeChild(t),e}return e})},579:function(e,n,t){(function(n){function t(e,n,t){function i(n){var t=m,i=x;return m=x=void 0,_=n,g=e.apply(i,t)}function o(e){return _=e,v=setTimeout(d,n),k?i(e):g}function a(e){var t=e-y,i=e-_,r=n-t;return N?O(r,b-i):r}function c(e){var t=e-y,i=e-_;return void 0===y||t>=n||t<0||N&&i>=b}function d(){var e=E();if(c(e))return h(e);v=setTimeout(d,a(e))}function h(e){return v=void 0,S&&m?i(e):(m=x=void 0,g)}function p(){void 0!==v&&clearTimeout(v),_=0,m=y=x=v=void 0}function u(){return void 0===v?g:h(E())}function f(){var e=E(),t=c(e);if(m=arguments,x=this,y=e,t){if(void 0===v)return o(y);if(N)return v=setTimeout(d,n),i(y)}return void 0===v&&(v=setTimeout(d,n)),g}var m,x,b,g,v,y,_=0,k=!1,N=!1,S=!0;if("function"!=typeof e)throw new TypeError(l);return n=s(n)||0,r(t)&&(k=!!t.leading,N="maxWait"in t,b=N?w(s(t.maxWait)||0,n):b,S="trailing"in t?!!t.trailing:S),f.cancel=p,f.flush=u,f}function i(e,n,i){var o=!0,a=!0;if("function"!=typeof e)throw new TypeError(l);return r(i)&&(o="leading"in i?!!i.leading:o,a="trailing"in i?!!i.trailing:a),t(e,n,{leading:o,maxWait:n,trailing:a})}function r(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function o(e){return!!e&&"object"==typeof e}function a(e){return"symbol"==typeof e||o(e)&&y.call(e)==d}function s(e){if("number"==typeof e)return e;if(a(e))return c;if(r(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=r(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(h,"");var t=u.test(e);return t||f.test(e)?m(e.slice(2),t?2:8):p.test(e)?c:+e}var l="Expected a function",c=NaN,d="[object Symbol]",h=/^\s+|\s+$/g,p=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,f=/^0o[0-7]+$/i,m=parseInt,x="object"==typeof n&&n&&n.Object===Object&&n,b="object"==typeof self&&self&&self.Object===Object&&self,g=x||b||Function("return this")(),v=Object.prototype,y=v.toString,w=Math.max,O=Math.min,E=function(){return g.Date.now()};e.exports=i}).call(n,t(59))},580:function(e,n,t){(function(n){function t(e,n,t){function r(n){var t=m,i=x;return m=x=void 0,_=n,g=e.apply(i,t)}function o(e){return _=e,v=setTimeout(d,n),k?r(e):g}function l(e){var t=e-E,i=e-_,r=n-t;return N?w(r,b-i):r}function c(e){var t=e-E,i=e-_;return void 0===E||t>=n||t<0||N&&i>=b}function d(){var e=O();if(c(e))return h(e);v=setTimeout(d,l(e))}function h(e){return v=void 0,S&&m?r(e):(m=x=void 0,g)}function p(){void 0!==v&&clearTimeout(v),_=0,m=E=x=v=void 0}function u(){return void 0===v?g:h(O())}function f(){var e=O(),t=c(e);if(m=arguments,x=this,E=e,t){if(void 0===v)return o(E);if(N)return v=setTimeout(d,n),r(E)}return void 0===v&&(v=setTimeout(d,n)),g}var m,x,b,g,v,E,_=0,k=!1,N=!1,S=!0;if("function"!=typeof e)throw new TypeError(s);return n=a(n)||0,i(t)&&(k=!!t.leading,N="maxWait"in t,b=N?y(a(t.maxWait)||0,n):b,S="trailing"in t?!!t.trailing:S),f.cancel=p,f.flush=u,f}function i(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function r(e){return!!e&&"object"==typeof e}function o(e){return"symbol"==typeof e||r(e)&&v.call(e)==c}function a(e){if("number"==typeof e)return e;if(o(e))return l;if(i(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=i(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(d,"");var t=p.test(e);return t||u.test(e)?f(e.slice(2),t?2:8):h.test(e)?l:+e}var s="Expected a function",l=NaN,c="[object Symbol]",d=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,p=/^0b[01]+$/i,u=/^0o[0-7]+$/i,f=parseInt,m="object"==typeof n&&n&&n.Object===Object&&n,x="object"==typeof self&&self&&self.Object===Object&&self,b=m||x||Function("return this")(),g=Object.prototype,v=g.toString,y=Math.max,w=Math.min,O=function(){return b.Date.now()};e.exports=t}).call(n,t(59))},581:function(e,n,t){(function(n){function t(e,n){return null==e?void 0:e[n]}function i(e){var n=!1;if(null!=e&&"function"!=typeof e.toString)try{n=!!(e+"")}catch(e){}return n}function r(e){var n=-1,t=e?e.length:0;for(this.clear();++n-1}function m(e,n){var t=this.__data__,i=O(t,e);return i<0?t.push([e,n]):t[i][1]=n,this}function x(e){var n=-1,t=e?e.length:0;for(this.clear();++n0},e.prototype.connect_=function(){u&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),v?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){u&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var n=e.propertyName,t=void 0===n?"":n;g.some(function(e){return!!~t.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),w=function(e,n){for(var t=0,i=Object.keys(n);t0},e}(),A="undefined"!=typeof WeakMap?new WeakMap:new p,R=function(){function e(n){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var t=y.getInstance(),i=new S(n,t,this);A.set(this,i)}return e}();["observe","unobserve","disconnect"].forEach(function(e){R.prototype[e]=function(){var n;return(n=A.get(this))[e].apply(n,arguments)}});var L=function(){return void 0!==f.ResizeObserver?f.ResizeObserver:R}();n.a=L}).call(n,t(59))},583:function(e,n){var t=!("undefined"==typeof window||!window.document||!window.document.createElement);e.exports=t},584:function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function o(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n}function a(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,n){for(var t=0;t600?e.classList.add("active"):e.classList.remove("active")}},{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.handleScroll)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.handleScroll)}},{key:"render",value:function(){return d.default.createElement(x,{dark:this.props.dark,side:this.props.side,ref:"top",onClick:this.handleClick},d.default.createElement("i",{className:"bx bxs-to-top"}))}}]),n}(c.Component);n.default=b},585:function(e,n,t){var i=t(586);"string"==typeof i&&(i=[[e.i,i,""]]);var r={hmr:!0};r.transform=void 0;t(588)(i,r);i.locals&&(e.exports=i.locals)},586:function(e,n,t){n=e.exports=t(587)(!1),n.push([e.i,'[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper,[data-simplebar]{width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-wrapper{overflow:hidden}.simplebar-mask{direction:inherit;overflow:hidden;width:auto!important;height:auto!important;z-index:0}.simplebar-mask,.simplebar-offset{position:absolute;padding:0;margin:0;left:0;top:0;bottom:0;right:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;-webkit-overflow-scrolling:touch}.simplebar-content{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;visibility:visible;overflow:scroll;max-width:100%;max-height:100%}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:0;right:0;opacity:0;transition:opacity .2s linear}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition:opacity 0s linear}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.hs-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll}',""])},587:function(e,n){function t(e,n){var t=e[1]||"",r=e[3];if(!r)return t;if(n&&"function"==typeof btoa){var o=i(r);return[t].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([o]).join("\n")}return[t].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var i=t(n,e);return n[2]?"@media "+n[2]+"{"+i+"}":i}).join("")},n.i=function(e,t){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r=0&&v.splice(n,1)}function s(e){var n=document.createElement("style");return e.attrs.type="text/css",c(n,e.attrs),o(e,n),n}function l(e){var n=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",c(n,e.attrs),o(e,n),n}function c(e,n){Object.keys(n).forEach(function(t){e.setAttribute(t,n[t])})}function d(e,n){var t,i,r,o;if(n.transform&&e.css){if(!(o=n.transform(e.css)))return function(){};e.css=o}if(n.singleton){var c=g++;t=b||(b=s(n)),i=h.bind(null,t,c,!1),r=h.bind(null,t,c,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(t=l(n),i=u.bind(null,t,n),r=function(){a(t),t.href&&URL.revokeObjectURL(t.href)}):(t=s(n),i=p.bind(null,t),r=function(){a(t)});return i(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;i(e=n)}else r()}}function h(e,n,t,i){var r=t?"":i.css;if(e.styleSheet)e.styleSheet.cssText=w(n,r);else{var o=document.createTextNode(r),a=e.childNodes;a[n]&&e.removeChild(a[n]),a.length?e.insertBefore(o,a[n]):e.appendChild(o)}}function p(e,n){var t=n.css,i=n.media;if(i&&e.setAttribute("media",i),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}function u(e,n,t){var i=t.css,r=t.sourceMap,o=void 0===n.convertToAbsoluteUrls&&r;(n.convertToAbsoluteUrls||o)&&(i=y(i)),r&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var a=new Blob([i],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}var f={},m=function(e){var n;return function(){return void 0===n&&(n=e.apply(this,arguments)),n}}(function(){return window&&document&&document.all&&!window.atob}),x=function(e){var n={};return function(t){if(void 0===n[t]){var i=e.call(this,t);if(i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(e){i=null}n[t]=i}return n[t]}}(function(e){return document.querySelector(e)}),b=null,g=0,v=[],y=t(589);e.exports=function(e,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");n=n||{},n.attrs="object"==typeof n.attrs?n.attrs:{},n.singleton||"boolean"==typeof n.singleton||(n.singleton=m()),n.insertInto||(n.insertInto="head"),n.insertAt||(n.insertAt="bottom");var t=r(e,n);return i(t,n),function(e){for(var o=[],a=0;a<\/script>')),d.default.createElement("p",null,"To use an icon, add the ",d.default.createElement("code",{className:"side"},"box-icon")," element to the location where the icon should be displayed:"),d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},'')),d.default.createElement("p",null," To use solid icons or logos add attribute ",d.default.createElement("code",{className:"side"},"type")," as solid or logo "),d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},'',d.default.createElement("br",null),'')),d.default.createElement("p",null,"The ",d.default.createElement("code",{className:"side"},"box-icon")," custom element supports the following attributes:"),d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},""))),d.default.createElement("h3",{id:"usage-as-font"},"Usage as a Font"),d.default.createElement("h4",{id:"import-css"},"Import the CSS"),d.default.createElement("div",null,d.default.createElement("p",null,"Copy-paste the stylesheet ",d.default.createElement("code",{className:"side"},"link")," into your ",d.default.createElement("code",{className:"side"},"head")," to load our CSS")," ",d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},"",d.default.createElement("br",null),"\x3c!-- or --\x3e"," ",d.default.createElement("br",null),"")),d.default.createElement("p",null,"This will load boxicons font into your webpage")),d.default.createElement("h4",{id:"html"},"HTML"),d.default.createElement("div",null,d.default.createElement("p",null," To use an icon on your page, add a prefix",d.default.createElement("code",{className:"side"},"bx-")," for regular icons, ",d.default.createElement("code",{className:"side"},"bxs-")," for solid icons & ",d.default.createElement("code",{className:"side"},"bxl-")," for logos followed by the icon name and seperate class with the",d.default.createElement("code",{className:"side"},"bx"),":")," ",d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},"",d.default.createElement("br",null),"",d.default.createElement("br",null),"")),"You can see the names of all the icons ",d.default.createElement(u.Link,{to:"/cheatsheet"},"here")),d.default.createElement("h3",{id:"starter-template"},"Starter Templates"),d.default.createElement("div",null,d.default.createElement("p",null," Create an HTML document and copy-paste the starter template")," ",d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},""," ",d.default.createElement("br",null),"",d.default.createElement("br",null),d.default.createElement("span",{className:"tab"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"}," ",""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"}," ","\x3c!-- Boxicons CSS --\x3e"),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},"Hello, Boxicons!"),d.default.createElement("br",null),d.default.createElement("span",{className:"tab"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"}," ","
Hello, Boxicons!
"),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab"}," "),d.default.createElement("br",null),"")),d.default.createElement("p",null,"A template for usage with the web component instead of icon font")," ",d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html"},""," ",d.default.createElement("br",null),"",d.default.createElement("br",null),d.default.createElement("span",{className:"tab"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"}," ",""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"}," ","\x3c!-- Boxicons JS --\x3e"),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},"Hello, Boxicons!"),d.default.createElement("br",null),d.default.createElement("span",{className:"tab"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"}," ","
Hello, Boxicons!
"),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab-2"},""),d.default.createElement("br",null),d.default.createElement("span",{className:"tab"}," "),d.default.createElement("br",null),""))),d.default.createElement("h3",{id:"styling"},"Styling"),d.default.createElement("h4",{id:"sizing"},"Sizing"),d.default.createElement("div",null,d.default.createElement("p",null," You can change size of the icon with",d.default.createElement("code",{className:"side"},"font-size")," CSS. It will inherit the ",d.default.createElement("code",{className:"side"},"font-size"),"from the parent by default. There are fixed sizes you can add to the icon by adding classes",d.default.createElement("code",{className:"side"},"bx-xs"),", ",d.default.createElement("code",{className:"side"},"bx-sm"),", ",d.default.createElement("code",{className:"side"},"bx-md")," and ",d.default.createElement("code",{className:"side"},"bx-lg"))," ",d.default.createElement(O,null,d.default.createElement("i",{className:"bx bxs-smiley-happy bx-xs "}),d.default.createElement("i",{className:"bx bxs-smiley-happy bx-sm"}),d.default.createElement("i",{className:"bx bxs-smiley-happy bx-md"}),d.default.createElement("i",{className:"bx bxs-smiley-happy bx-lg"})),d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html display"},"","",d.default.createElement("br",null),"",d.default.createElement("br",null),"",d.default.createElement("br",null),"",d.default.createElement("br",null),d.default.createElement("br",null),"\x3c!-- Boxicons web component --\x3e",d.default.createElement("br",null),d.default.createElement("br",null),"",d.default.createElement("br",null))),d.default.createElement("br",null)),d.default.createElement("h4",{id:"rotation-flipping"},"Rotation & Flipping"),d.default.createElement("div",null,d.default.createElement("p",null," Rotate the icons using classes ",d.default.createElement("code",{className:"side"},"bx-rotate-90"),", ",d.default.createElement("code",{className:"side"},"bx-rotate-180")," and ",d.default.createElement("code",{className:"side"},"bx-rotate-270")," or Flip the icons using ",d.default.createElement("code",{className:"side"},"bx-flip-horizontal")," and ",d.default.createElement("code",{className:"side"},"bx-flip-vertical")),d.default.createElement(O,null,d.default.createElement("i",{className:"bx bxs-like bx-rotate-90 bx-md"}),d.default.createElement("i",{className:"bx bxs-like bx-rotate-180 bx-md"}),d.default.createElement("i",{className:"bx bxs-like bx-rotate-270 bx-md"}),d.default.createElement("i",{className:"bx bxs-like bx-flip-horizontal bx-md"}),d.default.createElement("i",{className:"bx bxs-like bx-flip-vertical bx-md"})),d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html display"},"","",d.default.createElement("br",null),"",d.default.createElement("br",null),"",d.default.createElement("br",null),"",d.default.createElement("br",null),"",d.default.createElement("br",null),d.default.createElement("br",null),"\x3c!-- Boxicons web component --\x3e",d.default.createElement("br",null),d.default.createElement("br",null),"",d.default.createElement("br",null),"",d.default.createElement("br",null))),d.default.createElement("br",null)),d.default.createElement("h4",{id:"list-icons"},"List Icons"),d.default.createElement("div",null,d.default.createElement("p",null," Use icons as bullets for the list by adding class ",d.default.createElement("code",{className:"side"},"bx-ul")," to the unordered list element and include the icons inside the",d.default.createElement("code",{className:"side"},"li")," ")," ",d.default.createElement(O,null,d.default.createElement("ul",{className:"bx-ul"},d.default.createElement("li",null," ",d.default.createElement("i",{className:"bx bx-right-arrow"}),"List item 1"),d.default.createElement("li",null," ",d.default.createElement("i",{className:"bx bx-x"}),"List item 2"),d.default.createElement("li",null," ",d.default.createElement("i",{className:"bx bx-plus"}),"List item 3"))),d.default.createElement(y.default,null," ",d.default.createElement("code",{className:"html display"},"