Custom SF Symbol not rendering hierarchical shading

Question

I have a custom SF Symbol that renders with hierarchical shading when viewed in the SF Symbols 3 app, but in iOS using SwiftUI it renders as monochrome.

Here is the symbol in the SF Symbols 3 app:

Here is the symbol imported as a 3.0 template in the asset catalog:

Here is the code to render it:

  Image("custom.figure.steps")
    .font(.largeTitle)
    .padding(.trailing)
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(status.statusColor)

Here is how it renders in iOS simulator:

How do I get the hierarchical shading?

Answer 1

Ok, discovered my mistake. I exported as a template, which did not preserve the layers. When I exported as a symbol 3.0, the layers were preserved and now things are rendering as expected.

How I diagnosed:

• imported the SVG that I had exported as a template back into SF Symbols and noticed that only a single layer was there
• exported as a symbol and imported that into Xcode, rendered as hierarchical

Bottom line: Export as a symbol, not as a template when importing into Xcode.