Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 Swift 5.5, iOS 15, Xcode 13

Part 1: SwiftUI Views & View Modifiers

9. SFSymbols

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions

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

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

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")
}