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;
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,
svg {
width: 100%;
@ -103,21 +119,27 @@ ${transformationsCss}
case 'name':
handleNameChange(this, oldVal, newVal);
break;
case 'color':
this._state.$iconHolder.style.fill = newVal || "";
break;
case 'size':
handleSizeChange(this, oldVal, newVal);
break;
}
}
}
function handleNameChange(inst, oldVal, newVal) {
inst._state.currentName = newVal;
inst._state.$iconHolder.textContent = '';
const state = inst._state;
state.currentName = newVal;
state.$iconHolder.textContent = '';
if (newVal) {
const iconUrl = `${inst.constructor.cdnUrl}/${newVal}.svg`;
inst.constructor.getIconSvg(iconUrl)
.then((iconData) => {
if (inst._state.currentName === newVal) {
inst._state.$iconHolder.innerHTML = iconData;
if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.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;
}
}