SF Symbols Magic Strings

Zach Eriksen

The 2019 WWDC was a great developer conference that released some awesome updates and new frameworks. Some of my favorites were Vision Text Recognition on macOS, ARKit 3, and SwiftUI. Along with SwiftUI and the new Apple operating systems, Apple introduced SF Symbols.

SF Symbols is a collection of symbols used throughout the new operating systems, there are over 1,500 symbols currently. Every symbol is customizable and acts similar to Text.

HStack { Image(systemName: “circle”).font(.title) Text(“Hello World!”).font(.title)
HStack { Image(systemName: “circle”).font(.title) Text(“Hello World!”).font(.title)

SF Symbols macOS App (Beta)

To figure out any name for an SF Symbol, you must first download the macOS app. Go to Apple Design to download the beta app. In the app you can search for the symbol you are looking for.

Magic Strings Solution

SF

Now these symbols are very helpful, but it is difficult having to type a string for over 1,500 different symbols. Frustrated by this I made a simple project SF using SPM (Swift Package Manager). SF is a simple project that contains an enum.

public enum SF
public enum SF

SF contains over 1,500 cases for every SF Symbol, the period was replaced with underscores. The enum has two computed variables, name and image.

var name & var image
var name & var image

Example Usage

SFExplorer is used to test the SF cases. Since the SF enum is CaseIterable, we can loop through all the symbols and see them in a list.

Normal Usage

Having an enum helps with not worrying about if you typed one character wrong. It also lets you store an array of SF vs having an array of Strings.


Any contributions to the SF git repo are welcome. Thanks for reading, but if you got this far… I’d like to tell you how I got most of the unique named strings for the SF enum.

No… I didn’t type all of them…

I used Vision

During the 2019 WWDC there was a talk on macOS Text Recognition. After watching this talk and trying out the demo project, I used Vision’s Text Recognition to get all the SF Symbol names. After which I transferred all the data to a text file and did some nice and handy, find and replace.

Boom 💥

SF was born.


Thanks for reading 📖
Twitter

Zach Eriksen

Written by

Swift Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade