How to use SF Symbols in iOS 12 and below?

久未见 提交于 2019-12-01 03:02:48
funkenstrahlen

You can not use SFSymbols natively in iOS versions older than iOS 13.

However if you are interested in using the graphics you can use the SFSymbols app to export SVG versions of the icon. Then use some graphics tool to convert them to icons you can import into your asset catalog.

According to the Human Interface Guidelines you should not use the new icons in older iOS releases though:

You can use SF Symbols in apps running in iOS 13 and later, watchOS 6 and later, and tvOS 13 and later. To browse the full set of symbols, download the SF Symbols app. https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

Work around in progress

I did not manage to find the solution, I gave up, but actually I went pretty far in investigating. Maybe someone luckier than me will be able to figure out hpw to continue the work I started:

In Apple documentation, it is said that, in order to easily browse all the new iOS 13 SF Symbols, you can dowmload the SF Symbols app : https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

Once instaled you can go in Application > SF Symbols > showPackage content

From there, under content > Resources we can find an interesting file named SFSymbolsFallback.ttf

And if you try to open this file on https://fontdrop.info/ you can see that it contains all the font glyphs that are released in iOS 13 as SF Font, with associated unicodes


Bingo? not so fast...

From there I tried to import this .ttf into my project in iOS 12, on XCode 10.2.1, but it seems that it is never properly imported. It is not retrievable in the list of available fonts when calling UIFont.familyNames

More interesting, if I try to import this font in Font Book app, I receive a warning that says that it contains duplication, some kind of conflict with an existing font


From there?

My guess is that there is another font that prevent SF Symbols to be installed, in Font Book and on Xcode.

One of the solution could be to find the one that is in conflict in XCode package and delete it ( this may be Symbols font or San Francisco that are causing problems idk)

I also tried to open the font file with a font editor and change its Name and family Name without success.

If anyone want to continue investigating..

Hope this can help someone !

You can open .svg use Figma. Then select the Regular-M and export as PDF or PNG.

You can upload the new ios 13 sf-pro-rounded font to your project. Then enable that font in your label.

Open sf symbols, click on the smbol you want, cmd+c, go to your project, click on a label cmd+v. Run the project, and there should be the icon

cheers,

SF Symbols is a system only supported on iOS 13 or later - it's not possible to use them on iOS 12 or below. You'll need to use fallbacks for those older operating systems.

See Human Interface Guidelines

This icon set is based on SF Symbols https://framework7.io/icons/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!