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

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

@@ -11,18 +11,24 @@ struct Icon: HTML {
     /// The icon's rendered width and height, in pixels.
     let size: Int
 
+    /// The stroke width, or `nil` for the glyph's own.
+    let weight: String?
+
     // 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.
+    ///   - weight: the stroke width, or `nil` (the default) for the glyph's own.
     init(
         _ glyph: Glyph,
-        size: Int = 20
+        size: Int = 20,
+        weight: String? = nil
     ) {
         self.glyph = glyph
         self.size = size
+        self.weight = weight
     }
 
     // MARK: Computed
@@ -32,7 +38,7 @@ struct Icon: 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>
+            stroke-width="\(weight ?? glyph.strokeWidth)" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\(glyph.shapes)</svg>
             """
         )
     }
@@ -50,10 +56,14 @@ extension Icon {
         case bookmark
         /// A check mark.
         case check
+        /// A page of text.
+        case document
         /// Filter lines.
         case filter
         /// A key.
         case key
+        /// A padlock.
+        case lock
         /// A speech bubble.
         case message
         /// A magnifying glass.
@@ -75,8 +85,10 @@ extension Icon.Glyph {
         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 .document: #"<rect x="5" y="3" width="14" height="18" rx="1"></rect><path d="M9 8h6M9 12h6M9 16h3"></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 .lock: #"<rect x="5" y="11" width="14" height="10" rx="1"></rect><path d="M8 11V7a4 4 0 0 1 8 0v4"></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>"#