astro
Version:
Astro is a modern site builder with web best practices, performance, and DX front-of-mind.
47 lines (45 loc) • 916 B
JavaScript
import { getIconElement, isDefinedIcon } from "./icons.js";
class DevToolbarIcon extends HTMLElement {
_icon = void 0;
shadowRoot;
get icon() {
return this._icon;
}
set icon(name) {
this._icon = name;
this.buildTemplate();
}
constructor() {
super();
this.shadowRoot = this.attachShadow({ mode: "open" });
if (this.hasAttribute("icon")) {
this.icon = this.getAttribute("icon");
} else {
this.buildTemplate();
}
}
getIconHTML(icon) {
if (icon && isDefinedIcon(icon)) {
return getIconElement(icon)?.outerHTML ?? "";
}
return "<slot />";
}
buildTemplate() {
this.shadowRoot.innerHTML = `
<style>
svg {
width: 100%;
height: 100%;
}
(forced-colors: active) {
svg path[fill="#fff"] {
fill: black;
}
}
</style>
${this.getIconHTML(this._icon)}`;
}
}
export {
DevToolbarIcon
};