Implemented phase 0 for the POC prototype in the Website service.

Services/Website/Sources/Library/Internal/Components/Icon.swift

@@ -0,0 +1,96 @@
+import Elementary
+
+/// A decorative inline SVG stroke icon, drawn in the current text colour.
+struct Icon: HTML {
+
+    // MARK: Properties
+
+    /// The glyph the icon draws.
+    let glyph: Glyph
+
+    /// The icon's rendered width and height, in pixels.
+    let size: Int
+
+    // MARK: Initializers
+
+    /// Creates an icon.
+    /// - Parameters:
+    ///   - glyph: the glyph the icon draws.
+    ///   - size: the icon's rendered width and height, in pixels; 20 by default.
+    init(
+        _ glyph: Glyph,
+        size: Int = 20
+    ) {
+        self.glyph = glyph
+        self.size = size
+    }
+
+    // MARK: Computed
+
+    /// Rendered raw: the markup is static, never user input.
+    var body: some HTML {
+        HTMLRaw(
+            """
+            <svg class="icon" width="\(size)" height="\(size)" viewBox="0 0 24 24" fill="none" stroke="currentColor" \
+            stroke-width="\(glyph.strokeWidth)" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\(glyph.shapes)</svg>
+            """
+        )
+    }
+
+}
+
+// MARK: - Enumerations
+
+extension Icon {
+    /// A glyph an ``Icon`` can draw.
+    enum Glyph {
+        /// A bell.
+        case bell
+        /// A bookmark.
+        case bookmark
+        /// A check mark.
+        case check
+        /// Filter lines.
+        case filter
+        /// A key.
+        case key
+        /// A speech bubble.
+        case message
+        /// A magnifying glass.
+        case search
+        /// A shopfront.
+        case shop
+        /// Sort arrows.
+        case sort
+    }
+}
+
+extension Icon.Glyph {
+
+    // MARK: Computed
+
+    /// The shapes the glyph is drawn with.
+    var shapes: String {
+        switch self {
+        case .bell: #"<path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"></path><path d="M10 21h4"></path>"#
+        case .bookmark: #"<path d="M6 3h12v18l-6-4-6 4z"></path>"#
+        case .check: #"<path d="m5 12 5 5 9-10"></path>"#
+        case .filter: #"<path d="M4 6h16M7 12h10M10 18h4"></path>"#
+        case .key: #"<circle cx="7.5" cy="15.5" r="4.5"></circle><path d="M10.7 12.3 21 2"></path><path d="m18 5 3 3"></path><path d="m15 8 3 3"></path>"#
+        case .message: #"<path d="M4 5h16v11H8l-4 4z"></path>"#
+        case .search: #"<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path>"#
+        case .shop: #"<path d="M3 9.5 12 4l9 5.5"></path><path d="M5 10v9h14v-9"></path><path d="M10 19v-5h4v5"></path>"#
+        case .sort: #"<path d="M7 4v16M7 20l-3-3M7 20l3-3M17 20V4M17 4l-3 3M17 4l3 3"></path>"#
+        }
+    }
+
+    /// The glyph's stroke width; heavier for glyphs drawn small.
+    var strokeWidth: String {
+        switch self {
+        case .check: "3.5"
+        case .filter, .key, .search, .sort: "2.2"
+        default: "2"
+        }
+    }
+
+}