Given a SVG icon with viewBox that respect material icon principles, generate appropriate SFSymbol.
Designers often use the material guidelines to produce icon.
Inside this viewbox of 24x24px, there is a mandatory margin of 2px.
The icon is supposed to respect a guideline.
For instance theese icons respect material guidelines:
More info here: https://m3.material.io/styles/icons/designing-icons
On the other side, and while it is still possible to use svg
, Apple pushes for the use of SfSymbol.
SFSymbols have multiple benefits:
- performance
- ability to mix text and image in a proper way
- ability to do bi (or multi) color icon
More info here:
- https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app
- https://developer.apple.com/design/human-interface-guidelines/sf-symbols
It require the developper to take a template, and insert the icon inside, while respecting the size and the margin.
Since a few version, you can provide only three variations:
- ultralight-S
- regular-S
- black-S
And the system (UIKit, or SwiftUI) will interpolate the rest.
We provide the small, but to respect the material system, you are supposed to use the .medium
gem install sf_symbol_converter
Then convert icon one by one:
sf_symbol_converter convert ./input.svg output.svg
Or batch convert:
sf_symbol_converter batch_convert ./input_dir/ ./output_dir