Animating SF Symbols

SF Symbols is a library that contains over 5,000 symbols that developers can integrate within their text, using the San Francisco font.

Don’t be confused – SF Symbols are not emojis. Emojis are meant to express feelings and emotions within text. Conversely, SF Symbols are excellent replacements for icons that represent states, actions, and tools.

Here’s a basic example of displaying a clock alarm symbol with text next to it:

var body: some View {
        HStack {
            Image(systemName:
              "alarm.waves.left.and.right.fill")
            Text("Alarm")
        }.font(.system(size: 30))
    }

We can see no surprises...