1.5.0
59
README.md
|
@ -5,13 +5,12 @@
|
|||
|
||||
_High Quality web friendly icons_
|
||||
|
||||
'Boxicons' is a carefully designed open source iconset with 400+ icons. It's crafted to look enrich your website/app experience.
|
||||
'Boxicons' is a carefully designed open source iconset with 700+ icons. It's crafted to look enrich your website/app experience.
|
||||
|
||||
|
||||
_Announcing Boxicons v1.1.0!_
|
||||
_Announcing Boxicons v1.5.0!_
|
||||
|
||||
14 more icons have been added to the list, and some pre built CSS classes to perform various functions like, rotate, animate and add border to the icons.
|
||||
- A few bug fixes on the existing icons has been to make it pixel perfect.
|
||||
Solid icons have been added with a seperate logos category
|
||||
|
||||
You can check out the detailed documentation [here](https://boxicons.com/get-started)
|
||||
|
||||
|
@ -45,67 +44,25 @@ Instead of installing you may use the remote version
|
|||
```html
|
||||
<head>
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/boxicons@1.1.0/css/boxicons.min.css">
|
||||
href="https://cdn.jsdelivr.net/npm/boxicons@1.5.0/css/boxicons.min.css">
|
||||
<!-- or -->
|
||||
<link rel="stylesheet"
|
||||
href="https://unpkg.com/boxicons@1.1.0/css/boxicons.min.css">
|
||||
href="https://unpkg.com/boxicons@1.5.0/css/boxicons.min.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
|
||||
2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-':
|
||||
2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons , 'bxs-' for solid icons and 'bxl-' for logos:
|
||||
|
||||
```html
|
||||
<i class="bx bx-hot"></i>
|
||||
<i class="bx bxs-hot"></i>
|
||||
<i class="bx bxl-facebook-square"></i>
|
||||
```
|
||||
|
||||
[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
|
||||
<script src="https://unpkg.com/boxicons@latest/dist/box-icon-element.js"></script>
|
||||
```
|
||||
|
||||
To use an icon, add the `<box-icon>` element to the location where the icon should be displayed:
|
||||
|
||||
```html
|
||||
<box-icon name="hot"></box-icon>
|
||||
```
|
||||
|
||||
The `<box-icon>` custom element supports the following attributes:
|
||||
|
||||
```html
|
||||
<box-icon
|
||||
name="adjust|alarms|etc...."
|
||||
color="blue|red|etc..."
|
||||
size="xs|sm|md|lg|cssSize"
|
||||
rotate="90|180|270"
|
||||
flip="horizontal|vertical"
|
||||
shape="square|circle"
|
||||
animation="spin|tada|etc..."
|
||||
></box-icon>
|
||||
```
|
||||
|
||||
- `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`
|
||||
|
||||
The Custom Element class (`BoxIconElemnet`) exposes the following static members:
|
||||
|
||||
- `tagName`: property that holds the HTML element tag name. Default: `box-icon`
|
||||
- `defined([tagName])`: Defines the Element in the custom element registry using either the tagName provided on input or the (default) the one defined on the Class.
|
||||
- `cdnUrl`: property that holds the URL that will be used to retrieve the images. URL should point to the folder that contains the images. example: `//unpkg.com/boxicons@1.1.1/svg` (no trailing forward slash)
|
||||
- `getIconSvg(iconName)`: method used to retrieve the SVG image. Should return a Promise that resolves with the SVG source (String).
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/boxicons@1.1.0/css/boxicons.min.css">
|
||||
href="https://cdn.jsdelivr.net/npm/boxicons@1.5.0/css/boxicons.min.css">
|
||||
|
||||
<link rel="shortcut icon" href="static/img/favicon.ico?v=3" >
|
||||
|
||||
|
@ -75,6 +75,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="static/dist/bundle.js?v=19" async></script>
|
||||
<script src="static/dist/bundle.js?v=20" async></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
3701
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "boxicons",
|
||||
"version": "1.1.1",
|
||||
"version": "1.5.0",
|
||||
"private": true,
|
||||
"description": "High Quality web friendly icons",
|
||||
"scripts": {
|
||||
|
|
|
@ -140,7 +140,7 @@ export class BoxIconElement extends HTMLElement {
|
|||
constructor() {
|
||||
super();
|
||||
this.$ui = this.attachShadow({ mode: 'open' });
|
||||
this.$ui.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
|
||||
//this.$ui.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
|
||||
if (usingShadyCss()) {
|
||||
GLOBAL.ShadyCSS.styleElement(this);
|
||||
}
|
||||
|
|
BIN
static/boxicons-1.5.0.zip
Normal file
2
static/css/boxicons.min.css
vendored
2
static/dist/0.bundle.js
vendored
BIN
static/dist/0.bundle.js.gz
vendored
2
static/dist/1.bundle.js
vendored
BIN
static/dist/1.bundle.js.gz
vendored
2
static/dist/2.bundle.js
vendored
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([2],{454:function(e,t,n){"use strict";function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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 o(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)}function c(e){return{icons:e.icons}}function u(e){return(0,m.bindActionCreators)({fetchIcons:d.fetchIcons},e)}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),i=n(5),s=function(e){return e&&e.__esModule?e:{default:e}}(i),f=n(54),d=n(77),m=n(47),p=function(e){function t(e){a(this,t);var n=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={icons:{data:null}},n.copyCode=n.copyCode.bind(n),n}return o(t,e),r(t,[{key:"componentDidMount",value:function(){window.scrollTo(0,0)}},{key:"componentWillMount",value:function(){this.props.fetchIcons()}},{key:"componentWillReceiveProps",value:function(e){this.setState({icons:e.icons})}},{key:"copyCode",value:function(e){document.querySelector("input."+e).select(),document.execCommand("copy")}},{key:"render",value:function(){var e=this,t=s.default.createElement("tr",null,s.default.createElement("td",null),s.default.createElement("td",null));return null!==this.state.icons.data&&(t=this.state.icons.data.map(function(t,n){return s.default.createElement("tr",{onClick:function(){e.copyCode(t.name)},key:t.id},s.default.createElement("td",{width:"24"},s.default.createElement("i",{className:"bx bx-"+t.name})),s.default.createElement("td",null,t.name,s.default.createElement("input",{className:t.name+" hidden",onChange:function(){},type:"text",value:t.name}),s.default.createElement("i",{className:"bx bx-copy cs-copy"})))})),s.default.createElement("div",{className:"page-back"},s.default.createElement("div",{className:"page-cont"},s.default.createElement("div",{className:"page-cont-in"},s.default.createElement("div",{className:"page-head"},s.default.createElement("div",{className:"page-head-in"},s.default.createElement("h1",null,"Cheatsheet"),s.default.createElement("p",null,"Copy paste the name of any of ",null!==this.state.icons.data&&this.state.icons.data.length," icons"))),s.default.createElement("div",{className:"page-body"},s.default.createElement("table",null,s.default.createElement("thead",null,s.default.createElement("tr",null,s.default.createElement("th",null),s.default.createElement("th",null))),s.default.createElement("tbody",null,t))))))}}]),t}(i.Component);t.default=(0,f.connect)(c,u)(p)}});
|
||||
webpackJsonp([2],{456: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 c(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 u(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 r=function(){function e(e,t){for(var a=0;a<t.length;a++){var l=t[a];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(t,a,l){return a&&e(t.prototype,a),l&&e(t,l),t}}(),o=a(5),d=l(o),f=(a(77),a(166)),i=l(f),m=function(e){function t(e){n(this,t);var a=c(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.state={icons:{data:i.default}},a.copyCode=a.copyCode.bind(a),a}return u(t,e),r(t,[{key:"componentDidMount",value:function(){window.scrollTo(0,0)}},{key:"copyCode",value:function(e){document.querySelector("input."+e).select(),document.execCommand("copy")}},{key:"render",value:function(){var e=this,t=d.default.createElement("tr",null,d.default.createElement("td",null),d.default.createElement("td",null)),a=d.default.createElement("tr",null,d.default.createElement("td",null),d.default.createElement("td",null)),l=d.default.createElement("tr",null,d.default.createElement("td",null),d.default.createElement("td",null));return null!==this.state.icons.data&&(t=this.state.icons.data.map(function(t,a){if("REGULAR"===t.type_of_icon)return d.default.createElement("tr",{onClick:function(){e.copyCode(t.name)},key:t.id},d.default.createElement("td",{width:"24"},d.default.createElement("i",{className:"bx bx-"+t.name})),d.default.createElement("td",null,t.name,d.default.createElement("input",{className:t.name+" hidden",onChange:function(){},type:"text",value:t.name}),d.default.createElement("i",{className:"bx bx-copy cs-copy"})))}),a=this.state.icons.data.map(function(t,a){if("SOLID"===t.type_of_icon)return d.default.createElement("tr",{onClick:function(){e.copyCode(t.name)},key:t.id},d.default.createElement("td",{width:"24"},d.default.createElement("i",{className:"bx bxs-"+t.name})),d.default.createElement("td",null,t.name,d.default.createElement("input",{className:t.name+" hidden",onChange:function(){},type:"text",value:t.name}),d.default.createElement("i",{className:"bx bx-copy cs-copy"})))}),l=this.state.icons.data.map(function(t,a){if("LOGO"===t.type_of_icon)return d.default.createElement("tr",{onClick:function(){e.copyCode(t.name)},key:t.id},d.default.createElement("td",{width:"24"},d.default.createElement("i",{className:"bx bxl-"+t.name})),d.default.createElement("td",null,t.name,d.default.createElement("input",{className:t.name+" hidden",onChange:function(){},type:"text",value:t.name}),d.default.createElement("i",{className:"bx bx-copy cs-copy"})))})),d.default.createElement("div",{className:"page-back"},d.default.createElement("div",{className:"page-cont"},d.default.createElement("div",{className:"page-cont-in"},d.default.createElement("div",{className:"page-head"},d.default.createElement("div",{className:"page-head-in"},d.default.createElement("h1",null,"Cheatsheet"),d.default.createElement("p",null,"Copy paste the name of any of ",null!==this.state.icons.data&&this.state.icons.data.length," icons"))),d.default.createElement("div",{className:"page-body"},d.default.createElement("h3",{className:"cs"},"Regular"),d.default.createElement("table",null,d.default.createElement("thead",null,d.default.createElement("tr",null,d.default.createElement("th",null),d.default.createElement("th",null))),d.default.createElement("tbody",null,t)),d.default.createElement("h3",{className:"cs"},"Solid"),d.default.createElement("table",null,d.default.createElement("thead",null,d.default.createElement("tr",null,d.default.createElement("th",null),d.default.createElement("th",null))),d.default.createElement("tbody",null,a)),d.default.createElement("h3",{className:"cs"},"Logos"),d.default.createElement("table",null,d.default.createElement("thead",null,d.default.createElement("tr",null,d.default.createElement("th",null),d.default.createElement("th",null))),d.default.createElement("tbody",null,l))))))}}]),t}(o.Component);t.default=m}});
|
||||
//# sourceMappingURL=2.bundle.js.map
|
10
static/dist/bundle.js
vendored
BIN
static/dist/bundle.js.gz
vendored
Before Width: | Height: | Size: 259 KiB After Width: | Height: | Size: 415 KiB |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.242 11.786C10.89 11.015 11 10.06 11 9.5 11 6.731 8.319 6 6.901 6H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5c1.407 0 3.5-.932 3.5-3.5 0-1.225-.422-2.131-1.258-2.714zM4 8h2.901C6.987 8 9 8.017 9 9.5c0 .759-.155 1.5-2.005 1.5H4V8zm3.994 8H4v-3h2.995C9.5 13 9.5 13.867 9.5 14.5c0 1.324-1.051 1.49-1.506 1.5zM17.5 8a4.505 4.505 0 0 0-4.5 4.5v1c0 2.481 2.019 4.5 4.473 4.5h.001l.073.001c.42 0 2.163-.074 3.365-1.245.485-.473.801-1.073.961-1.756h-2.112a1.446 1.446 0 0 1-.238.317c-.573.564-1.591.683-1.994.683-1.18.031-2.245-.852-2.479-2H20v.006l1.108-.012A1 1 0 0 0 22 13v-.5c0-2.481-2.019-4.5-4.5-4.5zm-2.45 4c.232-1.14 1.243-2 2.45-2s2.218.86 2.45 2h-4.9zM14 5h6v2h-6z"/></svg>
|
Before Width: | Height: | Size: 761 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 22v-2.045c2.021-.221 4-1.755 4-4.455 0-1.889-.973-3.206-2.246-3.908A4.48 4.48 0 0 0 18 8.5c0-1.953-1.258-3.603-3-4.224V2h-2v2h-2V2H9v2H6v2h2v12H6v2h3v2h2v-2h2v2h2zM10 6h3.5C14.879 6 16 7.121 16 8.5S14.879 11 13.5 11H10V6zm0 12v-5h4.5c.864 0 2.5.522 2.5 2.5S15.364 18 14.5 18H10z"/></svg>
|
Before Width: | Height: | Size: 383 B |
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 294 B |
Before Width: | Height: | Size: 621 B After Width: | Height: | Size: 621 B |
Before Width: | Height: | Size: 354 B After Width: | Height: | Size: 354 B |
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 341 B |
Before Width: | Height: | Size: 164 B After Width: | Height: | Size: 164 B |
Before Width: | Height: | Size: 164 B After Width: | Height: | Size: 164 B |
Before Width: | Height: | Size: 164 B After Width: | Height: | Size: 164 B |
Before Width: | Height: | Size: 552 B After Width: | Height: | Size: 552 B |
Before Width: | Height: | Size: 665 B After Width: | Height: | Size: 665 B |
Before Width: | Height: | Size: 367 B After Width: | Height: | Size: 367 B |
Before Width: | Height: | Size: 367 B After Width: | Height: | Size: 367 B |
Before Width: | Height: | Size: 353 B After Width: | Height: | Size: 353 B |
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
Before Width: | Height: | Size: 241 B After Width: | Height: | Size: 241 B |
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 549 B |
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 516 B |
Before Width: | Height: | Size: 165 B After Width: | Height: | Size: 165 B |
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 239 B |
Before Width: | Height: | Size: 153 B After Width: | Height: | Size: 153 B |
Before Width: | Height: | Size: 263 B After Width: | Height: | Size: 263 B |
Before Width: | Height: | Size: 794 B After Width: | Height: | Size: 794 B |
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 287 B |
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 224 B |
Before Width: | Height: | Size: 223 B After Width: | Height: | Size: 223 B |
Before Width: | Height: | Size: 199 B After Width: | Height: | Size: 199 B |
Before Width: | Height: | Size: 578 B After Width: | Height: | Size: 578 B |
Before Width: | Height: | Size: 660 B After Width: | Height: | Size: 660 B |
Before Width: | Height: | Size: 598 B After Width: | Height: | Size: 598 B |
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 556 B |
Before Width: | Height: | Size: 365 B After Width: | Height: | Size: 365 B |
Before Width: | Height: | Size: 386 B After Width: | Height: | Size: 386 B |
Before Width: | Height: | Size: 161 B After Width: | Height: | Size: 161 B |
Before Width: | Height: | Size: 377 B After Width: | Height: | Size: 377 B |
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 405 B |
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 357 B |
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 341 B |
Before Width: | Height: | Size: 381 B After Width: | Height: | Size: 381 B |
Before Width: | Height: | Size: 322 B After Width: | Height: | Size: 322 B |
Before Width: | Height: | Size: 336 B After Width: | Height: | Size: 336 B |
Before Width: | Height: | Size: 396 B After Width: | Height: | Size: 396 B |
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 296 B |
Before Width: | Height: | Size: 344 B After Width: | Height: | Size: 344 B |
Before Width: | Height: | Size: 269 B After Width: | Height: | Size: 269 B |
Before Width: | Height: | Size: 264 B After Width: | Height: | Size: 264 B |
Before Width: | Height: | Size: 692 B After Width: | Height: | Size: 692 B |
Before Width: | Height: | Size: 686 B After Width: | Height: | Size: 686 B |
Before Width: | Height: | Size: 834 B After Width: | Height: | Size: 834 B |
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 292 B |
Before Width: | Height: | Size: 595 B After Width: | Height: | Size: 595 B |
Before Width: | Height: | Size: 447 B After Width: | Height: | Size: 447 B |
Before Width: | Height: | Size: 891 B After Width: | Height: | Size: 891 B |
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
Before Width: | Height: | Size: 237 B After Width: | Height: | Size: 237 B |
Before Width: | Height: | Size: 324 B After Width: | Height: | Size: 324 B |
Before Width: | Height: | Size: 263 B After Width: | Height: | Size: 263 B |
Before Width: | Height: | Size: 285 B After Width: | Height: | Size: 285 B |
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 391 B |
Before Width: | Height: | Size: 328 B After Width: | Height: | Size: 328 B |
Before Width: | Height: | Size: 396 B After Width: | Height: | Size: 396 B |
Before Width: | Height: | Size: 628 B After Width: | Height: | Size: 628 B |
Before Width: | Height: | Size: 469 B After Width: | Height: | Size: 469 B |
Before Width: | Height: | Size: 559 B After Width: | Height: | Size: 559 B |
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 309 B |
Before Width: | Height: | Size: 410 B After Width: | Height: | Size: 410 B |
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 292 B |
Before Width: | Height: | Size: 363 B After Width: | Height: | Size: 363 B |
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 357 B |
Before Width: | Height: | Size: 350 B After Width: | Height: | Size: 350 B |
Before Width: | Height: | Size: 442 B After Width: | Height: | Size: 442 B |
Before Width: | Height: | Size: 259 B After Width: | Height: | Size: 259 B |
Before Width: | Height: | Size: 345 B After Width: | Height: | Size: 345 B |
Before Width: | Height: | Size: 194 B After Width: | Height: | Size: 194 B |
Before Width: | Height: | Size: 253 B After Width: | Height: | Size: 253 B |
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 213 B |
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 189 B |
Before Width: | Height: | Size: 172 B After Width: | Height: | Size: 172 B |
Before Width: | Height: | Size: 170 B After Width: | Height: | Size: 170 B |
Before Width: | Height: | Size: 174 B After Width: | Height: | Size: 174 B |