Preserve Accepted Styles for SFSymbols

Author: swhitty

SwiftDraw/DOM.SVG.swift

@@ -76,9 +76,9 @@ extension DOM {
 
     struct StyleSheet {
 
-        enum Selector: Hashable {
-            case element(String)
+        enum Selector: Hashable, Comparable {
             case id(String)
+            case element(String)
             case `class`(String)
         }
 

SwiftDraw/Renderer.SFSymbol.swift

@@ -65,6 +65,8 @@ public struct SFSymbolRenderer {
         }
         var template = try SFSymbolTemplate.make()
 
+        template.svg.styles = image.styles.map(makeSymbolStyleSheet)
+
         let boundsRegular = try makeBounds(svg: image, auto: Self.makeBounds(for: pathsRegular), for: .regular)
         template.regular.appendPaths(pathsRegular, from: boundsRegular)
 
@@ -91,6 +93,29 @@ public struct SFSymbolRenderer {
         let result = formatter.encodeRootElement(element)
         return result
     }
+
+    func makeSymbolStyleSheet(from stylesheet: DOM.StyleSheet) -> DOM.StyleSheet {
+        var copy = stylesheet
+        for selector in stylesheet.attributes.keys {
+            switch selector {
+            case .class(let name):
+                if SFSymbolRenderer.containsAcceptedName(name) {
+                    copy.attributes[selector] = stylesheet.attributes[selector]
+                }
+            case .id, .element:
+                ()
+            }
+        }
+        return copy
+    }
+
+    static func containsAcceptedName(_ string: String?) -> Bool {
+        guard let string = string else { return false }
+        return string.contains("hierarchical-") ||
+        string.contains("monochrome-") ||
+        string.contains("multicolor-") ||
+        string.contains("SFSymbolsPreview")
+    }
 }
 
 extension SFSymbolRenderer {
@@ -165,19 +190,21 @@ extension SFSymbolRenderer {
         let ctm = ctm.concatenated(layer.transform.toMatrix())
         var paths = [SymbolPath]()
 
+        let symbolClass = containsAcceptedName(layer.class) ? layer.class : nil
+
         for c in layer.contents {
             switch c {
             case let .shape(shape, stroke, fill):
                 if let path = makePath(for: shape, stoke: stroke, fill: fill)?.applying(matrix: ctm) {
                     if fill.rule == .evenodd {
-                        paths.append(SymbolPath(class: layer.class, path: path.makeNonZero()))
+                        paths.append(SymbolPath(class: symbolClass, path: path.makeNonZero()))
                     } else {
-                        paths.append(SymbolPath(class: layer.class, path: path))
+                        paths.append(SymbolPath(class: symbolClass, path: path))
                     }
                 }
             case let .text(text, point, attributes):
                 if let path = makePath(for: text, at: point, with: attributes) {
-                    paths.append(SymbolPath(class: layer.class, path: path.applying(matrix: ctm)))
+                    paths.append(SymbolPath(class: symbolClass, path: path.applying(matrix: ctm)))
                 }
             case .layer(let l):
                 paths.append(contentsOf: getSymbolPaths(for: l, ctm: ctm))

SwiftDraw/XML.Formatter.SVG.swift

@@ -60,6 +60,8 @@ extension XML.Formatter {
                 element.attributes["height"] = formatter.formatLength(svg.height)
             }
 
+            try element.children.append(contentsOf: makeStyles(svg.styles))
+
             if let defs = try makeDefs(svg.defs) {
                 element.children.append(defs)
             }
@@ -90,6 +92,21 @@ extension XML.Formatter {
             return element.children.isEmpty ? nil : element
         }
 
+        func makeStyles(_ sheets: [DOM.StyleSheet]) throws -> [XML.Element] {
+            try sheets.compactMap(makeStyle)
+        }
+
+        func makeStyle(_ sheet: DOM.StyleSheet) throws -> XML.Element? {
+            let element = XML.Element(name: "style")
+
+            element.innerText = "\n" + sortSelectors(sheet.attributes.keys)
+                .compactMap { encodeSelector($0, attributes: sheet.attributes[$0]!) }
+                .joined(separator: "\n")
+                .indenting(spaces: 8) + "\n    "
+
+            return element.innerText?.isEmpty == false ? element : nil
+        }
+
         func makeGraphicsAttributes(from graphic: DOM.GraphicsElement) -> [String: String] {
             var attributes = makeGraphicsAttributes(from: graphic.attributes)
             attributes["id"] = graphic.id
@@ -370,5 +387,39 @@ extension XML.Formatter {
                 return "\(cmd.rawValue)"
             }
         }
+
+        func sortSelectors<S: Sequence>(_ selectors: S) -> [DOM.StyleSheet.Selector] where S.Element == DOM.StyleSheet.Selector {
+            let previews = selectors.filter { encodeSelector($0).contains("SFSymbolsPreview") }
+            let other = selectors.filter { !encodeSelector($0).contains("SFSymbolsPreview") }
+            return other.sorted() + previews.sorted()
+        }
+
+        func encodeSelector(_ selector: DOM.StyleSheet.Selector, attributes: DOM.PresentationAttributes) -> String? {
+            guard let style = makeStyleAttribute(from: attributes) else {
+                return nil
+            }
+            let name = encodeSelector(selector)
+            return "\(name) { \(style) }"
+        }
+
+        func encodeSelector(_ selector: DOM.StyleSheet.Selector) -> String {
+            switch selector {
+            case .class(let name):
+                return ".\(name)"
+            case .element(let name):
+                return name
+            case .id(let name):
+                return "#\(name)"
+            }
+        }
+    }
+}
+
+private extension String {
+    func indenting(spaces: Int = 0) -> String {
+        let pad = String(repeating: " ", count: spaces)
+        return components(separatedBy: "\n")
+          .map { "\(pad)\($0)" }
+          .joined(separator: "\n")
     }
 }