[iOS - swiftUI] SF Symbols(San Francisco 심볼) 사용 방법

목차) SwiftUI의 기본 - 목차 링크

SF Symbols 개념

• 애플에서 개발한 San Francisco font에 같이 사용할 수 있게 만든 이미지
• 마치 Text를 다루듯 font, foregroundColor를 모두 사용할 수 있는 형태
• Image(systemImage:) 를 이용하여 SF Symbols를 사용한 후, .font로 폰트 프로퍼티 사용이 가능

SF Symbols 사용 방법

• AppStore > SF Symbols Explorer 설치

• SF Symbols Explorer 열기
  • SF Symbols 이미지들을 확인 가능

• square.and.arrow.up 이미지를 사용하여 테스트

struct ContentView: View {
  var body: some View {
    Image(systemName: "square.and.arrow.up")
  }
}

• SF Symbols는 font 속성을 그대로 사용이 가능

• size, weight, design 모두 적용 가능

struct ContentView: View {
  var body: some View {
    VStack {
      Image(systemName: "square.and.arrow.up")
        .font(.headline)
      
      Image(systemName: "square.and.arrow.up")
        .font(.callout)
      
      Image(systemName: "square.and.arrow.up")
        .font(.caption)
      
      Image(systemName: "square.and.arrow.up")
        .font(.system(size: 50, weight: .bold, design: .default))
    }
  }
}

• foregroundColor 지정

Image(systemName: "square.and.arrow.up")
  .font(.system(size: 50, weight: .bold, design: .default))
  .foregroundColor(.purple)

• backgroundColor 지정

Image(systemName: "square.and.arrow.up")
  .font(.system(size: 50, weight: .bold, design: .default))
  .foregroundColor(.white)
  .background(.blue)

* 참고

https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols