feature/book-page (#4)

Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #4

js/icons/chevron-down-icon.js

@@ -0,0 +1,64 @@
+/**
+ * Chevron Down Icon Web Component
+ * A downward pointing chevron
+ */
+class ChevronDownIcon 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"
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("chevron-down-icon", ChevronDownIcon);