Begin work on an icon component

module/components/icon.mjs

@@ -0,0 +1,68 @@
+/**
+Attributes:
+@property {string} name - The name of the icon, takes precedence over the path
+@property {string} path - The path of the icon file
+*/
+export class DotDungeonIcon extends HTMLElement {
+	static elementName = `dd-icon`;
+	static formAssociated = false;
+
+	static #styles = ``;
+	_internals;
+	_shadow;
+
+	_min;
+	_max;
+	_smallStep;
+	_largeStep;
+
+	constructor() {
+		super();
+		this._shadow = this.attachShadow({ mode: `open`, delegatesFocus: true });
+		if (DotDungeonIcon.#styles) this.#embedStyles();
+	};
+
+
+	connectedCallback() {
+		this.replaceChildren();
+
+		/*
+		This converts all of the double-dash prefixed properties on the element to
+		CSS variables so that they don't all need to be provided by doing style=""
+		*/
+		for (const attrVar of this.attributes) {
+			if (attrVar.name?.startsWith(`--`)) {
+				this.style.setProperty(attrVar.name, attrVar.value);
+			};
+		};
+
+		/*
+		Style fetching if we haven't gotten them yet
+		*/
+		if (!DotDungeonIcon.#styles) {
+			fetch(`./systems/dotdungeon/.styles/v3/components/incrementer.css`)
+			.then(r => r.text())
+			.then(t => {
+				DotDungeonIcon.#styles = t;
+				this.#embedStyles();
+			});
+		};
+
+		/*
+		Try to retrieve the icon if it isn't present, try the path then default to
+		the slot content, as then we can have a default per-icon usage
+		*/
+		let content;
+
+		if (!content) {
+			let slot = document.createElement(`slot`);
+			content ??= slot;
+		}
+	};
+
+	#embedStyles() {
+		const style = document.createElement(`style`);
+		style.innerHTML = DotDungeonIcon.#styles;
+		this._shadow.appendChild(style);
+	};
+};