Search code examples
swiftuisf-symbols

Can't get SF Symbol erase layer imported from SF Symbols to Xcode?

I created a custom SF Symbol. Pretty straightforward horse head with transparent eyes.

Trying to get the eyes to be transparent regardless of what rendering mode is used.

I used the “erase” color for the eye layer and a solid color for the head.

I export it as SF Symbol 4 and import it to Xcode.

The symbol looks right in SF Symbols, but is missing the “erase” layer in Xcode for all rendering modes; color, hierarchical and monochrome.

Here is how I am implementing the custom symbol. Where tab.iconName = "horse” in this case.

enter image description here

enter image description here

        HStack {
            Image(tab.iconName).symbolRenderingMode(selectedTab == tab ? .monochrome : .multicolor)
                .font(.system(size: 20))
            if(selectedTab == tab) {
                Text(tab.title)
                    .font(.msTypographyButtonLarge())
                    .foregroundColor(selectedTab == tab ? Color.theme.accentPrimary: Color.theme.textDisabled)
            }
        }
        .foregroundColor(selectedTab == tab ? Color.theme.accentPrimary: Color.theme.textDisabled)
        .padding(.vertical, 8)
        .padding(.horizontal, selectedTab == tab ? 26 : 0)
        .background(selectedTab == tab ? Color.theme.buttonSecondary : Color.clear)
        .cornerRadius(40)
    }
Solution

  • When you have multiple subpaths that are erased, only one gets processed and the others are ignored.