7

I can't use an SF Symbol as an asset for a tab bar icon.

I tried using the GUI to drag and drop the file. I'm unsure of how to add it programatically.

I expected to be able to drag/drop but it won't accept the .svg file. I add a new symbol set but that doesn't work as the tab bar icon asset.

rob mayoff
  • 375,296
  • 67
  • 796
  • 848
Paul Drees
  • 73
  • 1
  • 5
  • You say drag and drop. But you also say programmatically. Those are opposites. Which do you want? The symbol has a name, so there is no need for the asset catalog. Just use the name. – matt Jun 09 '19 at 03:52

3 Answers3

8

If you are using the new Xcode 11 beta, the new SF Symbols are already included and you do not need to import the .svg files.

Open your Storyboard file, click on the tab bar icon (not the one in the tab bar controller).

Now open the attributes inspector on the right hand side and open the combo box at "Bar Item" -> "Image". Now there will be the SF Symbols in this list as in the screenshot below.

Screenshot Steps 1-3 Screenshots Step 4

tomaculum
  • 547
  • 4
  • 15
  • 1
    I was able to do what you describe just fine, and the icons/symbols show up correctly in the storyboard editor just like in your screenshots. But when I go to build the project, I get a build error `symbol.name not found` (where “symbol.name” is the SF Symbol name, e.g., “pencil”). I’m in Xcode 11.2, and my project is set to target iOS 13.2. What do I need to do to have my project properly “include” (or whatever) the SF Symbols? – Grant Neufeld Nov 16 '19 at 12:12
2

You can use SF Symbol from code. For quick navigation in icons collection use Apple's app from official page https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

For SwiftUI use this snippet:

.tabItem {
    VStack {
        Image(systemName: "gear")
            .font(.title)
        Text("Settings")
    }
}
Sound Blaster
  • 4,778
  • 1
  • 24
  • 32
2

The following code works for setting the system icon for UITabBarItem with UIKit and Xcode 11 or 12 via Swift:

var yourTabViewController: YourTabViewController?
let iconConfig = UIImage.SymbolConfiguration(scale: .large)
let gearIcon = UIImage(systemName: "gearshape.fill", withConfiguration: iconConfig)
let settingsTabBarItem = UITabBarItem(title: "Settings", image: gearIcon, tag: 0)
yourTabViewController = storyboard.instantiateViewController(withIdentifier: YourTabViewController.identifier) as? YourTabViewController
yourTabViewController?.tabBarItem = settingsTabBarItem

Reference that helped me

Mishka
  • 502
  • 5
  • 15