iOS 10 to 13 fallback support

[MoOx]

Hi @birkir!

I am working on a react-native library to offer a consistent platform experience for icon.
This means in short: using sfsymbols on iOS when possible, and material icons for android.

I am open to help you to support iOS13- (even if I am not confortable with iOS development).
What work need to be done? If you lead me correctly I am sure I can handle some dirty work :)

[MoOx]

I have investigated on this a little bit and found a nice way to handle that (tell me if this works for you):

• convert all icons as SVG files (including weight and size variation, that would give multiple SVG (like in the template exported from SF Symbols.app). A simple script with a regex (already wrote) can help to convert the big SVG provided by SF Symbols export to multiple SVG (on per icons)
• To use SVG in React Native, I convert them with a simple package I made react-from-svg that will create pure React Native code that would need react-native-svg (I guess that's an acceptable tradeoff).

One (tiny) blocker:
I can't see how to easily export "brand" icons (the one like this)

We cannot use built-in export, so we will have to make them by hand (eg: drag & drop into sketch, convert as outline, then export as SVG, with variation that can be a "lot" of dirty work, which could also introduce human errors).

Another thing I see that using SVG will make it hard to respect the text baseline. With my regex to extract SVG, we totally lose the context. Maybe another solution would be more accurate to export the SVGs from a sliced template in Sketch ?

[andrew-levy]

@MoOx I have been doing a similar manual approach for my project right now. I think this would work, aside from the brand icons. Would you have to store all the svg files/converted RN SVGs in this project? Would that bloat the project too much?

[MoOx]

According to the license, we cannot store them in the repo, I guess in any form, if I interpreted the license correctly.
So we would need a post install script or a manual user action (action that we could prepare via a script to make it less painful, via a local cache on the client machine etc). In all case, that will be limited to computer that runs on macOS with SF Symbols app installed.
Or we could find "a magic trick", to respect the license by not "sharing the icons". For example we could keep a huge "obfuscated blob" that contains all icons, but not "readable" and transform that in a build step (and obviously keeping this thing in low light to no get too much attention - not saying "secret" because it will not be, but we can try not to document this and keeping the "secret sauce" in the code only).

[lprhodes]

Even without using actual SF symbols it would be nice to have a fallback option for when SF symbols is unavailable.

Wix implements something similar: https://wix.github.io/react-native-navigation/api/options-imageResource/