Wednesday, August 12, 2020

Preparing your Xojo made Mac App for macOS Big Sur

Part 3 - SF Symbols

Wednesday, August 12, 2020 - Sam Rowlands

Continuing on the preparing your Xojo made Mac app for macOS Big Sur, this article will cover SF Symbols.

what are SF Symbols

SF Symbols are emoji. Which are designed specifically as icons to use in buttons, menus, segmented controls etc. Generally they're single color, although some may contain multiple colors and designed to fit in with Apple's current "flat" trend.

Unlike emoji you won't find 'em in the normal emoji picker. Instead you must download the SF Symbols application from Apple's website to view them. https://developer.apple.com/sf-symbols/.

Using Apple recommended API

Starting with macOS 11, Apple have added API (which is included in the Ohanaware App Kit 1.0.5) for loading SF Symbols as a NSImage. Which can be added to buttons, menus, popupmenus, segmentedcontrols, image wells, drawn in canvases, pictures, OWSourceList and with some math, a Listbox (all the code you need is included in the Ohanaware App Kit). These are "images" and therefore cannot easily be used in labels.

However: this API is not present on any previous version of the macOS, you'll need to design one solution for macOS Catalina and below, and another for macOS Big Sur and newer.

Copy and Paste the symbol from the application into a label

A solution I was originally unaware of until this Xojo Forum post https://forum.xojo.com/t/sf-symbols-on-macos/.

Reading the thread it makes it seem like you can use SF Symbols as text, which you can (I'll explain more in a bit). Simply opening the SF Symbols app, finding the symbol you like and copy pasting into a Xojo label works. And I'll be honest, I actually like it this way, because it can easily be used in places where an image cannot. It greatly simplifies UI design, it's like a breath of fresh air.

Why don't I see many apps using these symbols, it is because on the face of it, they're quite boring and obviously designed for small screens? Or is there another reason? Let me see what's the minimum supported OS for this emoji... hmm... macOS isn't mentioned... They work here, what about...

They don't work on any OS lower than 10.16, unless the SFSymbols application is installed. The needed fonts are not installed on Catalina, Mojave or below. Technically we could include the fonts within our Xojo made applications, but not legally and besides, we don't want to include MBs of fonts, for a couple of symbols.

We can export the symbols for use in our apps.. It generates a SVG file, to which I wondered if Apple have added support for SVG to App Kit in Catalina, "No". I'll just use SVG Converter... But it's a whole page with various weights and sizes on it. So I'd need to manually edit the SVG file, before I convert it... No thanks.

Which leaves one option left, that I can see. Create a tool which rasterizes the text into a bunch of PNG images, <sigh/>. This option greatly nullifies the advantages of using the Copy/Paste method and back to using images.

In Summary

SF Symbols are great, they finally make it easy to use system supplied images almost anywhere in your UI (via Copy/Paste), even if I think they're a little boring (being flat), but at least our apps can easily be consistent with OS and we don't have to spend hours creating icons for UI elements.

However they're only supported on macOS Big Sur, and since I installed the symbols application on my Big Sur installation, I can't be sure that the Copy/Paste method works natively in Big Sur. To support older versions of the macOS, you're forced to seek an alternative solution.