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

Support for color and size html attributes

Browse source
This commit is contained in:
Paul T 2018-06-29 20:44:28 -04:00
parent 1fdae261d4
commit f5a6addf83
1 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -83,6 +83,22 @@ export class BoxIconElement extends HTMLElement {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
:host([size=xs]) {
width: 0.8rem;
height: 0.8rem;
}
:host([size=sm]) {
width: 1.55rem;
height: 1.55rem;
}
:host([size=md]) {
width: 2.25rem;
height: 2.25rem;
}
:host([size=lg]) {
width: 3.0rem;
height: 3.0rem;
}
#icon, #icon,
svg { svg {
width: 100%; width: 100%;
@ -103,21 +119,27 @@ ${transformationsCss}
case 'name': case 'name':
handleNameChange(this, oldVal, newVal); handleNameChange(this, oldVal, newVal);
break; break;
case 'color':
this._state.$iconHolder.style.fill = newVal || "";
break;
case 'size':
handleSizeChange(this, oldVal, newVal);
break;
} }
} }
} }
function handleNameChange(inst, oldVal, newVal) { function handleNameChange(inst, oldVal, newVal) {
inst._state.currentName = newVal; const state = inst._state;
inst._state.$iconHolder.textContent = ''; state.currentName = newVal;
state.$iconHolder.textContent = '';
if (newVal) { if (newVal) {
const iconUrl = `${inst.constructor.cdnUrl}/${newVal}.svg`; const iconUrl = `${inst.constructor.cdnUrl}/${newVal}.svg`;
inst.constructor.getIconSvg(iconUrl) inst.constructor.getIconSvg(iconUrl)
.then((iconData) => { .then((iconData) => {
if (inst._state.currentName === newVal) { if (state.currentName === newVal) {
inst._state.$iconHolder.innerHTML = iconData; state.$iconHolder.innerHTML = iconData;
} }
}) })
.catch((error) => { .catch((error) => {
@ -126,3 +148,18 @@ function handleNameChange(inst, oldVal, newVal) {
} }
} }
function handleSizeChange(inst, oldVal, newVal) {
const state = inst._state;
if (state.size) {
state.$iconHolder.style.width = state.$iconHolder.style.height = "";
state.size = state.sizeType = null;
}
// If the size is not one of the short-hand ones, then it must be a
// css size unit - add it directly to the icon holder.
if (newVal && !/^(xs|sm|md|lg)$/.test(state.size)) {
state.size = newVal.trim();
state.$iconHolder.style.width = state.$iconHolder.style.height = state.size;
}
}