Backupppert/boxicons
1
0
Fork 0
mirror of https://github.com/atisawd/boxicons.git synced 2024-11-13 19:04:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

1.5.2

Browse source 
added web component
This commit is contained in:
atisawd 2018-07-07 08:51:13 +05:30
parent 059bdba25e
commit 2a18efb31d
21 changed files with 259 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
README.md
View file

@ -8,11 +8,9 @@ _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.1!_
_Announcing Boxicons v1.5.2!_
Solid icons have been added with a seperate logos category
You can check out the detailed documentation [here](https://boxicons.com/get-started)
Load the icons as web component , load only the icons you need .
## Installation
@ -25,7 +23,7 @@ $ npm install boxicons --save
import the module
```javscript
import 'boxicons/css/boxicons.css';
import 'boxicons/dist/boxicons.js';
```
## Usage
@ -44,10 +42,10 @@ Instead of installing you may use the remote version
```html
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@1.5.1/css/boxicons.min.css">
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!-- or -->
<link rel="stylesheet"
href="https://unpkg.com/boxicons@1.5.1/css/boxicons.min.css">
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
```
@ -59,6 +57,58 @@ Instead of installing you may use the remote version
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>
```
### 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>
```
To use solid icons or logos add attribute `type` as solid or logo
```html
<box-icon name="hot" type="solid"></box-icon>
<box-icon name="facebook-square" type="logo"></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"
border="square|circle"
animation="spin|tada|etc..."
type = "regular|solid|logo"
pull = "left|right"
></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`
- `border`: 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`
- `type`: one of the following values: `regular`,`solid`, `logo`
- `pull`: one of the following values: `left`,`right`
The Custom Element class (`BoxIconElement`) 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.5.2/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).
[Check out all the icons here!](https://boxicons.com)

12
dev.box-icon-element.html
View file

File diff suppressed because one or more lines are too long

2
dist/box-icon-element.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/boxicons.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

4
index.html
View file

@ -36,7 +36,7 @@
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@1.5.1/css/boxicons.min.css">
href="https://cdn.jsdelivr.net/npm/boxicons@latest/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=2" async></script>
<script src="static/dist/bundle.js?v=3" async></script>
</body>
</html>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "boxicons",
"version": "1.5.1",
"version": "1.5.2",
"private": true,
"description": "High Quality web friendly icons",
"scripts": {

50
src/box-icon-element.js
View file

@ -42,13 +42,20 @@ TEMPLATE.innerHTML = `
width: auto;
height: auto;
}
:host([shape=square]) #icon {
:host([pull=left]) #icon {
float: left;
margin-right: .3em!important;
}
:host([pull=right]) #icon {
float: right;
margin-left: .3em!important;
}
:host([border=square]) #icon {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: .25em;
}
:host([shape=circle]) #icon {
:host([border=circle]) #icon {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: 50%;
@ -74,7 +81,7 @@ export class BoxIconElement extends HTMLElement {
static get cdnUrl() {
// BUILD.DATA.VERSION is injected by webpack during a build.
// Value is same as package.json#version property.
return `//unpkg.com/boxicons@${BUILD.DATA.VERSION}/svg`;
return `//unpkg.com/boxicons@latest/svg`;
}
/**
* The html tag name to be use
@ -87,10 +94,12 @@ export class BoxIconElement extends HTMLElement {
'name',
'color',
'size',
'type',
'rotate',
'flip',
'animation',
'shape',
'border',
'pull'
];
}
@ -102,8 +111,15 @@ export class BoxIconElement extends HTMLElement {
*
* @return {Promise<String, Error>}
*/
static getIconSvg(iconName) {
const iconUrl = `${this.cdnUrl}/${iconName}.svg`;
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`;
}
else if(type==='logo'){
iconUrl = `${this.cdnUrl}/logos/bxl-${iconName}.svg`;
}
if (iconUrl && CACHE[iconUrl]) {
return CACHE[iconUrl];
}
@ -140,7 +156,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);
}
@ -162,6 +178,9 @@ 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}`);
@ -202,7 +221,7 @@ function handleNameChange(inst, oldVal, newVal) {
state.$iconHolder.textContent = '';
if (newVal) {
inst.constructor.getIconSvg(newVal)
inst.constructor.getIconSvg(newVal,state.type)
.then((iconData) => {
if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData;
@ -213,7 +232,20 @@ function handleNameChange(inst, oldVal, newVal) {
});
}
}
function handleTypeChange(inst, oldVal, newVal) {
const state = inst._state;
if (state.type) {
state.type = null;
}
if (newVal && (newVal==='solid' || newVal==='logo')) {
state.type = newVal;
}
else{
state.type = 'regular';
}
}
function handleSizeChange(inst, oldVal, newVal) {
const state = inst._state;

BIN
static/boxicons-1.0.7.zip
View file

Binary file not shown.

BIN
static/boxicons-1.1.0.zip
View file

Binary file not shown.

BIN
static/boxicons-1.5.0.zip
View file

Binary file not shown.

BIN
static/boxicons-1.5.2.zip Normal file
View file

Binary file not shown.

166
static/css/animations.css
View file

@ -3,12 +3,12 @@
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin
@ -16,12 +16,12 @@
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes burst
@ -29,14 +29,14 @@
0%
{
-webkit-transform: scale(1);
transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
}
@ -46,14 +46,14 @@
0%
{
-webkit-transform: scale(1);
transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
}
@ -93,14 +93,14 @@
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
@ -110,14 +110,14 @@
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
@ -127,14 +127,14 @@
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(20px);
transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
@ -144,32 +144,99 @@
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(20px);
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
{
from
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20%
{
-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
}
30%,
@ -178,7 +245,7 @@
90%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
}
40%,
@ -186,13 +253,13 @@
80%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
to
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@ -201,14 +268,14 @@
from
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20%
{
-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
}
30%,
@ -217,7 +284,7 @@
90%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
}
40%,
@ -225,76 +292,95 @@
80%
{
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
to
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bx-spin
{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.bx-spin-hover:hover
{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.bx-tada
{
-webkit-animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
}
.bx-tada-hover:hover
{
-webkit-animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
}
.bx-flashing
{
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
}
.bx-flashing-hover:hover
{
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
}
.bx-burst
{
-webkit-animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
}
.bx-burst-hover:hover
{
-webkit-animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
}
.bx-fade-up
{
-webkit-animation: fade-up 1.5s infinite linear;
animation: fade-up 1.5s infinite linear;
}
.bx-fade-up-hover:hover
{
-webkit-animation: fade-up 1.5s infinite linear;
animation: fade-up 1.5s infinite linear;
}
.bx-fade-down
{
-webkit-animation: fade-down 1.5s infinite linear;
animation: fade-down 1.5s infinite linear;
}
.bx-fade-down-hover:hover
{
-webkit-animation: fade-down 1.5s infinite linear;
animation: fade-down 1.5s infinite linear;
}
.bx-fade-left
{
-webkit-animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
}
.bx-fade-left-hover:hover
{
-webkit-animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
}
.bx-fade-right
{
-webkit-animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
}
.bx-fade-right-hover:hover
{
-webkit-animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
}
animation: fade-right 1.5s infinite linear;
}

18
static/css/boxicons.css
View file

@ -440,10 +440,28 @@ line-height: inherit;
{
font-size: 2.25rem!important;
}
.bx-fw{
width: 1.2857142857em;
font-size: 1.2857142857em;
height: 0.8em;
line-height: 0.8em;
vertical-align: middle;
margin-top: -0.2em!important;
}
.bx-lg
{
font-size: 3.0rem!important;
}
.bx-pull-left{
float: left;
margin-right: .3em!important;
}
.bx-pull-right{
float: right;
margin-left: .3em!important;
}
.bx-rotate-90
{
transform: rotate(90deg);

2
static/css/boxicons.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
static/dist/0.bundle.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
static/dist/0.bundle.js.gz vendored
View file

Binary file not shown.

2
static/dist/1.bundle.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
static/dist/1.bundle.js.gz vendored
View file

Binary file not shown.

4
static/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
static/dist/bundle.js.gz vendored
View file

Binary file not shown.

2
webpack.config.js
View file

@ -9,7 +9,7 @@ module.exports = {
path: path.resolve(__dirname, 'dist'),
library: 'BoxIconElement',
libraryTarget: 'umd',
filename: 'box-icon-element.js',
filename: 'boxicons.js',
},
devtool: 'source-map',
module: {