astro/dist/runtime/client/dev-toolbar/ui-library/icon.js

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.

import { getIconElement, isDefinedIcon } from "./icons.js";
export class DevToolbarIcon extends HTMLElement {
	_icon = undefined;
	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 ?? "";
		}
		// If the icon that was passed isn't one of the predefined one, assume that they're passing it in as a slot
		return "<slot />";
	}
	buildTemplate() {
		this.shadowRoot.innerHTML = `
			<style>
				svg {
					width: 100%;
					height: 100%;
				}

				@media (forced-colors: active) {
					svg path[fill="#fff"] {
						fill: black;
					}
				}
			</style>\n${this.getIconHTML(this._icon)}`;
	}
}