65 lines
1.5 KiB
JavaScript
65 lines
1.5 KiB
JavaScript
/**
|
|
* Book Open Icon Web Component
|
|
* An open book icon
|
|
*/
|
|
class BookOpenIcon extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ["size", "color", "stroke-width"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
get size() {
|
|
return this.getAttribute("size") || "48";
|
|
}
|
|
|
|
get color() {
|
|
return this.getAttribute("color") || "currentColor";
|
|
}
|
|
|
|
get strokeWidth() {
|
|
return this.getAttribute("stroke-width") || "1";
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
svg {
|
|
display: block;
|
|
}
|
|
</style>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="${this.size}"
|
|
height="${this.size}"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="${this.color}"
|
|
stroke-width="${this.strokeWidth}"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"></path>
|
|
</svg>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("book-open-icon", BookOpenIcon);
|