Resize SF Symbol in Mac Catalyst Toolbar

Question

Created Apr ’20

Replies 2

Boosts 0

Views 1.5k

Participants 1

Is there a way to resize the symbols in a toolbar within a Mac Catalyst app? When I use SF Symbols in a UIBarButton item, it does not look correct - especially when comparing to Apple apps with the same icons. I have tried applying configurations to the image, without luck.

let item = UIBarButtonItem(image: UIImage(systemName: "exclamationmark.bubble"), style: .plain, target: self, action: nil)
            let button = NSToolbarItem(itemIdentifier: itemIdentifier, barButtonItem: item)
return button

Answered by espen in 414459022

This workaround / extension on UIImage fixed the issue:

#if targetEnvironment(macCatalyst)
extension UIImage {
    
    func symbolForNSToolbar() -> UIImage? {
        guard let symbol = applyingSymbolConfiguration(.init(pointSize: 13)) else { return nil }
        
        let format = UIGraphicsImageRendererFormat()
        format.preferredRange = .standard
        
        return UIGraphicsImageRenderer(size: symbol.size, format: format).image { _ in symbol.draw(at: .zero) }.withRenderingMode(.alwaysTemplate)
    }
}
#endif

Boost

Answer 1

espen OP

Apr ’20

Screenshot of the issue: https://snipboard.io/NXjD86.jpg

Items placed into a NSToolbarItemGroup seems to scale correctly. But now it looks even more wierd, as the height of the segmented bar is smaller than the regular buttons.

0

Answer 2

espen OP

Apr ’20

Accepted Answer

This workaround / extension on UIImage fixed the issue:

#if targetEnvironment(macCatalyst)
extension UIImage {
    
    func symbolForNSToolbar() -> UIImage? {
        guard let symbol = applyingSymbolConfiguration(.init(pointSize: 13)) else { return nil }
        
        let format = UIGraphicsImageRendererFormat()
        format.preferredRange = .standard
        
        return UIGraphicsImageRenderer(size: symbol.size, format: format).image { _ in symbol.draw(at: .zero) }.withRenderingMode(.alwaysTemplate)
    }
}
#endif

2