Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 · Swift 5.5, iOS 15, Xcode 13

Part 1: SwiftUI Views & View Modifiers

09. SFSymbols

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 08. Fill & Stroke Shapes Next episode: 10. Challenge: Fill & Stroke Shapes

Notes: 09. SFSymbols

Download SFSymbols App: https://developer.apple.com/sf-symbols/

Transcript: 09. SFSymbols

If you look back to Luke’s design, you’ll notice that he uses a couple icons in the app: one that you tap to open up the leaderboards view, and one that you tap to reset the game.

It turns out these particular icons are included in a massive library symbols that comes included in iOS that you can use in your apps, called SFSymbols.

Let’s see how we can use SFSymbols in our app, and use them to create the nice rounded button that Luke has designed.

Visit this page and download the app: https://developer.apple.com/sf-symbols/

Type in list to find the first item (list.dash)

Type in counter to find the second item (arrow.counterclockwise)

Show the list view to show the full name.

Create a new SwiftUI View file named RoundedViews.swift.

Add this:

struct RoundedImageViewStroked: View {
  var systemName: String

  var body: some View {
    Image(systemName: systemName)
      .font(.title)
      .foregroundColor(Color("TextColor"))
      .frame(width: 56.0, height: 56.0)
  }
}

struct PreviewView: View {
  var body: some View {
    RoundedImageViewStroked(systemName: "arrow.counterclockwise")
  }
}

Test it in the preview:

PreviewView()
PreviewView()
  .preferredColorScheme(.dark)

Add another that you’ll need for challenge purposes:

struct RoundedImageViewFilled: View {
  var systemName: String

  var body: some View {
    Image(systemName: systemName)
      .font(.title)
      .frame(width: 56.0, height: 56.0)
  }
}

Modify PreviewView accordingly:

VStack(spacing: 10) {
  RoundedImageViewStroked(systemName: "arrow.counterclockwise")
  RoundedImageViewFilled(systemName: "list.dash")
}