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?

Have your tried rendering it with a standard system color? We can't tell what your `status.statusColor` is. — Yrb, Oct 12 '21 at 22:44
Just now tried with `Color(uiColor: .systemRed)` and `Color(uiColor: .systemGray)` and still rendering as monochrome. — Chuck Krutsinger, Oct 12 '21 at 23:27
What happens if you use foregroundStyle instead of forwgroundColor? — Tamás Sengel, Oct 13 '21 at 02:01
I used a 3.0 template and `foregroundStyle(...)` gives same monochrome rendering. FYI, `foregroundColor(...)` renders hierarchically for other symbols, just not the custom symbol. — Chuck Krutsinger, Oct 13 '21 at 13:58

score 0 · Answer 1 · answered Oct 13 '21 at 16:05

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.

Custom SF Symbol not rendering hierarchical shading

1 Answers1