fix: externalise icons

js/icons/shopping-bag-icon.js

@@ -0,0 +1,66 @@
+/**
+ * Shopping Bag Icon Web Component
+ * A reusable shopping bag/cart icon element
+ */
+class ShoppingBagIcon 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") || "32";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "#ffffff";
+  }
+
+  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="8" cy="21" r="1"></circle>
+        <circle cx="19" cy="21" r="1"></circle>
+        <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("shopping-bag-icon", ShoppingBagIcon);