Support for distinct layers within icons?

[tinder-darraghburke]

Hi! Excellent work with SwiftDraw, this is a very cool project!

I just had a quick question. I have an icon which consists of multiple layers that I'd like to be able to color separately using multicolor or hierarchical mode. As I understand it, SFSymbols uses the class attribute of each element to determine its layer. If I give a the following class:

monochrome-0 multicolor-0:systemBlueColor hierarchical-0:primary

It will be counted as a distinct layer. However, when I tried adding these classes to my base .svg file, and then running it through SwiftDraw, it appears that the class attribute is stripped in the final output, which effectively flattens the asset into a single layer. Is there any way to get it to pass through the class attribute, or is there some other method to separate out the layers of my asset?

Thanks so much!

[swhitty]

Great suggestion. I have pushed some changes to preserve the SVG element classname for SFSymbols to the main branch if you want to try it out.

I've made a one off build (notarized) you can try also:
SwiftDraw.dmg.zip

[tinder-darraghburke]

That works perfectly! Thank you so much for the quick response! I've got the multi-layered symbol generation going now, which is amazing.

If I could ask for one more feature from my wishlist: we have some symbols where we want to bake in a custom color into each layer for multicolor rendering mode. SF Symbols supports this via adding a <style> element to the SVG with content like this:

<style>
    .multicolor-0:custom {fill: #4280EF; opacity: 1.0;}
    .multicolor-1:custom {fill: #34A353; opacity: 1.0;}
    .multicolor-2:custom {fill: #F6B704; opacity: 1.0;}
    .multicolor-3:custom {fill: #E54335; opacity: 1.0;}
  </style>

But SwiftDraw currently removes the style element from the output, effectively removing the custom colors. Would it be possible to pass that through into the generated file as well?

[swhitty]

To keep the produced symbol tidy all styles were being stripped out, but I have made some changes to preserve the styles for selectors that include:

• hierarchical-
• monochrome-
• multicolor-
• SFSymbolsPreview

Are there any other SFSymbol specific selectors that are used?

Its on the main branch or you can try it out in this notarized build

SwiftDraw.dmg.zip

[tinder-darraghburke]

Hey @swhitty, sorry for the delayed response. This change is perfect for our use case! You've got all the selectors covered. In fact, a little more digging around with the SFSymbols format and it seems the SFSymbolsPreview classname is irrelevant after all - only the first three are used to determine how layers are split. Apple actually has some documentation on this here: https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app/#3875970

Anyway, thank you so much for addressing this issue! We're now able to automate transforming out entire icon library into SF Symbols with full multicolor support. This is a huge help for us. SwiftDraw is awesome! 😍

[swhitty]

Excellent.
0.14.0 includes the fix.