'UIEdgeInsets not working on System Images in TabBar

I am using XCode System Images (SF Symbols) for UITabBarItem Images. I'd like to remove the UITabBarItem Title which I have done. But also move the UITabBarItem Image down slightly.

In the past when I wasn't using System Images this would work fine using UIEdgeInsets. However, this appears to have no effect on System Images.

Code:

let imageConfiguration = UIImage.SymbolConfiguration(weight: .regular)
    let imageInsets = UIEdgeInsets(top: 8, left: 0, bottom: -8, right: 0)

lazy var activityTabBarItem: UITabBarItem = {
        let image = UIImage(systemName: "stopwatch")?.applyingSymbolConfiguration(imageConfiguration)
        let tabBarItem = UITabBarItem(title: nil,
                                      image: image,
                                      selectedImage: image)
        tabBarItem.imageInsets = imageInsets
        return tabBarItem
    }()

Is there a workaround for this?



Solution 1:[1]

You need to use - withAlignmentRectInsets(_ alignmentInsets: UIEdgeInsets) property of UIImage, to successfully set insets for SFSymbols. Following code in your cases:

image.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: -6, right: 0)

Apple doc for withAlignmentRectInsets

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sayalee Pote