This commit is contained in:
atisawd 2018-07-07 09:40:23 +05:30
parent 2a18efb31d
commit 0474a3fddd
9 changed files with 40 additions and 29 deletions

View file

@ -8,7 +8,7 @@ _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. '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.2!_ _Announcing Boxicons v1.5.3!_
Load the icons as web component , load only the icons you need . Load the icons as web component , load only the icons you need .

2
dist/boxicons.js vendored

File diff suppressed because one or more lines are too long

View file

@ -75,6 +75,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="static/dist/bundle.js?v=3" async></script> <script src="static/dist/bundle.js?v=4" async></script>
</body> </body>
</html> </html>

View file

@ -91,10 +91,10 @@ export class BoxIconElement extends HTMLElement {
static get observedAttributes() { static get observedAttributes() {
return [ return [
'type',
'name', 'name',
'color', 'color',
'size', 'size',
'type',
'rotate', 'rotate',
'flip', 'flip',
'animation', 'animation',
@ -113,7 +113,6 @@ export class BoxIconElement extends HTMLElement {
*/ */
static getIconSvg(iconName,type) { static getIconSvg(iconName,type) {
var iconUrl = `${this.cdnUrl}/regular/bx-${iconName}.svg`; var iconUrl = `${this.cdnUrl}/regular/bx-${iconName}.svg`;
console.log(type);
if(type==='solid'){ if(type==='solid'){
iconUrl = `${this.cdnUrl}/solid/bxs-${iconName}.svg`; iconUrl = `${this.cdnUrl}/solid/bxs-${iconName}.svg`;
} }
@ -169,6 +168,10 @@ export class BoxIconElement extends HTMLElement {
const $iconHolder = this._state.$iconHolder; const $iconHolder = this._state.$iconHolder;
switch (attr) { switch (attr) {
case 'type':
handleTypeChange(this, oldVal, newVal);
break;
case 'name': case 'name':
handleNameChange(this, oldVal, newVal); handleNameChange(this, oldVal, newVal);
break; break;
@ -178,9 +181,6 @@ export class BoxIconElement extends HTMLElement {
case 'size': case 'size':
handleSizeChange(this, oldVal, newVal); handleSizeChange(this, oldVal, newVal);
break; break;
case 'type':
handleTypeChange(this, oldVal, newVal);
break;
case 'rotate': case 'rotate':
if (oldVal) { if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`); $iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`);
@ -214,27 +214,9 @@ export class BoxIconElement extends HTMLElement {
} }
} }
} }
function handleNameChange(inst, oldVal, newVal) {
const state = inst._state;
state.currentName = newVal;
state.$iconHolder.textContent = '';
if (newVal) {
inst.constructor.getIconSvg(newVal,state.type)
.then((iconData) => {
if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.catch((error) => {
console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line
});
}
}
function handleTypeChange(inst, oldVal, newVal) { function handleTypeChange(inst, oldVal, newVal) {
const state = inst._state; const state = inst._state;
state.$iconHolder.textContent = '';
if (state.type) { if (state.type) {
state.type = null; state.type = null;
} }
@ -245,7 +227,36 @@ function handleTypeChange(inst, oldVal, newVal) {
else{ else{
state.type = 'regular'; state.type = 'regular';
} }
if(state.currentName!== undefined){
inst.constructor.getIconSvg(state.currentName,state.type)
.then((iconData) => {
if (state.type === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.catch((error) => {
console.error(`Failed to load icon: ${state.currentName + "\n"}${error}`); //eslint-disable-line
});}
} }
function handleNameChange(inst, oldVal, newVal) {
const state = inst._state;
state.currentName = newVal;
state.$iconHolder.textContent = '';
if (newVal) {
if(state.type!== undefined){
inst.constructor.getIconSvg(newVal,state.type)
.then((iconData) => {
if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.catch((error) => {
console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line
});}
}
}
function handleSizeChange(inst, oldVal, newVal) { function handleSizeChange(inst, oldVal, newVal) {
const state = inst._state; const state = inst._state;

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.