How can I get 3.0 symbols to render correctly in Xcode 13?

Question

maxkve OP

Created Sep ’21

Replies 3

Boosts 0

Views 1.5k

Participants 2

I'm having issues where symbols created using the 3.0 template won't render correctly in Xcode 13.

The symbols look fine in the SF Symbols app, but when I import into Xcode, the symbol is not placed appropriately in the symbol view (it may only show a zoomed-in view of the bottom left part of the symbol, or the symbol won't be in the symbol view at all).

EDIT: Images in comment/answer below.

EDIT2: To clarify, I'm referring to custom symbols.

How can I resolve this issue? Anyone able to point me in the right direction?

Thanks!

Answered by maxkve in 688707022

Alright, I think I finally figured it out.

I used to follow the steps below to produce a custom symbol when using 2.0 templates:

Export similar 2.0 template from SF Symbols
Import template in Adobe XD
Edit/create custom symbols in desired scales and weights
Export as .svg
Import in Xcode

Now, it seems that you have to import it back into SF Symbols in-between 4 and 5, you can't bring it directly into Xcode. The steps thus become:

Export similar 3.0 template from SF Symbols
Import template in Adobe XD
Edit/create custom symbols in desired scales and weights
Export as .svg
Import into SF Symbols
(Set up layers and colors for the various rendering modes)
Export symbol
Import in Xcode

Boost

Answer 1

maxkve OP

Sep ’21

In the SF Symbols app, symbols look fine:

Screenshot 2021-09-23 at 11.14.28.png

But in Xcode, they'll look like this:

Screenshot 2021-09-23 at 11.13.47.png

Or like this:

Screenshot 2021-09-23 at 11.10.53.png

0

Answer 2

azhukov OP

Sep ’21

Hey! I'm not sure if I know how to fix your problem but I know that SF Symbols refers to icons that already are in Xcode. You can use your bug.fill image without even importing it to the project

Try

let image = UIImage(systemName: "bug.fill")

0

Answer 3

maxkve OP

Sep ’21

Accepted Answer

Alright, I think I finally figured it out.

I used to follow the steps below to produce a custom symbol when using 2.0 templates:

Export similar 2.0 template from SF Symbols
Import template in Adobe XD
Edit/create custom symbols in desired scales and weights
Export as .svg
Import in Xcode

Now, it seems that you have to import it back into SF Symbols in-between 4 and 5, you can't bring it directly into Xcode. The steps thus become:

Export similar 3.0 template from SF Symbols
Import template in Adobe XD
Edit/create custom symbols in desired scales and weights
Export as .svg
Import into SF Symbols
(Set up layers and colors for the various rendering modes)
Export symbol
Import in Xcode

0