SFSymbol Icon Convertor
Given a SVG icon with viewBox that respect material icon principles, generate appropriate SFSymbol.
Longer rational
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
Instalation and usage
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