[SwiftUI] - SF Symbols 아이콘

SF Symbols은 내장된 아이콘으로서 약 1500개 가량의 아이콘을 지원해주고 크기 및 색을 변경 할 수 있다.

 

 

설치해서 사용하는 것입니다.

SF Symbols 공식 문서

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

SF Symbols - SF Symbols - Human Interface Guidelines - Apple Developer

앱 다운로드 링크

https://developer.apple.com/design/downloads/SF-Symbols.dmg

 

 

사용방법은 

Image(systemName: "star.circle")

 

시스템 네임 매개변수에 심벌의 이름을 전달해주면 된다.

 

 

ImageScale

기본적으로 midium으로 설정되어있고 따로 설정할 수 있다.

 

        HStack(spacing: 30){
            Image(systemName: "book.fill").imageScale(.small).foregroundColor(.red)
            Image(systemName: "book.fill").imageScale(.medium).foregroundColor(.green)
            Image(systemName: "book.fill").imageScale(.large).foregroundColor(.blue)
        }

Font

이미지 스케일 외에도 폰트를 이용해 크기를 변경 할 수 있다.

        HStack(spacing: 30){
            Image(systemName: "speaker.3").font(.body)
            Image(systemName: "speaker.3").font(.title)
            Image(systemName: "speaker.3").font(.system(size: 40))
            Image(systemName: "speaker.3").imageScale(.large).font(.system(size: 40))
        }

 

Weight

이미지는 굵기를 조정할 수 있는 수식어가 없어서 font 수식어를 이용해서 변경해야한다.

        HStack(spacing: 30){
            Image(systemName: "arrow.up").font(Font.title.weight(.black))
            Image(systemName: "arrow.left").font(Font.title.weight(.semibold))
            Image(systemName: "arrow.down").font(Font.title.weight(.light))
            Image(systemName: "arrow.right").font(Font.title.weight(.ultraLight))
        }