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

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:

  1. Export similar 2.0 template from SF Symbols
  2. Import template in Adobe XD
  3. Edit/create custom symbols in desired scales and weights
  4. Export as .svg
  5. 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:

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

In the SF Symbols app, symbols look fine:

But in Xcode, they'll look like this:

Or like this:

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")
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:

  1. Export similar 2.0 template from SF Symbols
  2. Import template in Adobe XD
  3. Edit/create custom symbols in desired scales and weights
  4. Export as .svg
  5. 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:

  1. Export similar 3.0 template from SF Symbols
  2. Import template in Adobe XD
  3. Edit/create custom symbols in desired scales and weights
  4. Export as .svg
  5. Import into SF Symbols
  6. (Set up layers and colors for the various rendering modes)
  7. Export symbol
  8. Import in Xcode
How can I get 3.0 symbols to render correctly in Xcode 13?
 
 
Q