fix: externalise icons

js/icons/arrow-circle-right-icon.js

@@ -0,0 +1,66 @@
+/**
+ * Arrow Circle Right Icon Web Component
+ * A circular arrow pointing right
+ */
+class ArrowCircleRightIcon 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") || "24";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  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"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="m12 16 4-4-4-4"></path>
+        <path d="M8 12h8"></path>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("arrow-circle-right-icon", ArrowCircleRightIcon);