How to center a SF Symbols image vertically in UITabBarItem?

Question

I am using SF Symbols images as tab images in my iOS app by assigning them as follows:

self.tabBarItem.image = UIImage(systemName: "ellipsis")  

This results in all images being top-aligned, but I would like to have them centered vertically.

What do I have to do for this?

Answer 1

Apparently SF symbols are rendered with system font size by default. So if you add a baseline offset of half that size to the ellipsis symbol you could almost perfectly center it vertically that way.

It's only almost perfect because ellipsis symbol has a height of its own which is not accounted for by this solution, even if it is not much.

self.tabBarItem.image = UIImage(systemName: "ellipsis")!.withBaselineOffset(fromBottom: UIFont.systemFontSize / 2)

Answer 2

The best solution, which will make your button identical to "tabBarSystemItem: .more", but with the possibility of removing the title and applying Configuration is the following:

self.tabBarItem.image = UIImage(systemName: "ellipsis", withConfiguration: 
UIImage.SymbolConfiguration(weight: .black))!.imageWithoutBaseline()