[SwiftUI] SF Symbols 4 설치 및 사용 방법 예제 코드 총정리(systemName, imageScale, font, weight)

SF Symbols이란?

• 애플이 직접 만들어 제공하는 이미지들의 모음(아이콘 라이브러리)
• 벡터 기반의 이미지로 색상 변경 및  크기 변경이 가능
• 애플의 시스템 폰트로 사용되는 SF Font(샌프란시스코 폰트)와 완벽하게 어울리도록 설계됨(자연스러우며, 동적타입 적용시 자동으로 텍스트 처럼 적절한 크기로 조정되기도 함)
• SVG파일로 만들어 추가 가능
• macOS에서는 지원하지 않음
• SF Symbols 4 다운로드
• SF Symbols 공식문서 바로가기

SF Symbols를 사용하기 위해서는 별도의 설치가 필요합니다.

위 다운로드 링크를 클릭하여 다운 받거나 여기 사이트 주소를 클릭 후 화면 제일 아래쪽으로 이동하여 다운받으신 후 설치하세요.

심볼4 기준으로 총 4,491개의 아이콘을 제공합니다.

SF  Symbols 사용방법

Image의 systemName 매개변수에 심벌의 이름을 지정해주면 됩니다.

    HStack {
        Button(action: {

        }){
            Image(systemName: "trash.circle.fill")
        }

        Image(systemName: "trash.slash.circle")
    }

SF Symbols 아이콘 사이즈 변경 방법

imageScale 수식어를 사용하여 사이즈를 변경할 수 있으며, small, medium, large 중에 적용할 수 있습니다.

Image(systemName: "trash.slash.circle").imageScale(.small)

Image(systemName: "trash.slash.circle").imageScale(.medium)

Image(systemName: "trash.slash.circle").imageScale(.large)

또한 font 수식어를 사용해서도 사이즈 변경이 가능합니다.

Image(systemName: "trash.slash.circle").font(.body)

Image(systemName: "trash.slash.circle").font(.title)

Image(systemName: "trash.slash.circle").font(.system(size:50))

Image(systemName: "trash.slash.circle").imageScale(.large).font(.system(size:50))

SF Symbols 이미지의 굵기를 조정하는 방법

이미지는 굵기를 조정할 수 있는 수식어가 없어서 font수식어를 사용하여 변경 가능합니다. 총 9가지 굵기 표현이 가능합니다.

Image(systemName: "trash.slash.circle")

Image(systemName: "trash.slash.circle").font(Font.title.weight(.black))

Image(systemName: "trash.slash.circle").font(Font.title.weight(.semibold))

Image(systemName: "trash.slash.circle").font(Font.title.weight(.light))

Image(systemName: "trash.slash.circle").font(Font.title.weight(.ultraLight))

SF Symbols 의 4가지 렌더링 모드

1. Monochrome (단색)
2. Hierarchical (계층)
3. Pallete (팔레트)
4. Multicolor (여러 가지 색상)

코드상에서 symbolRenderingMode 수식어를 사용하여 렌더링 모드를 변경할 수 있습니다.

Image(systemName: "trash.slash.circle")
    .symbolRenderingMode(.monochrome)
    .foregroundStyle(.red, .yellow, .green)
    .font(.system(size: 100))

Image(systemName: "trash.slash.circle")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.red, .yellow, .green)
    .font(.system(size: 100))
//                .frame(width: 300, height: 300, alignment: .center)
//                .background(.gray)

Image(systemName: "trash.slash.circle")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.red, .yellow, .green)
    .font(.system(size: 100))

Image(systemName: "trash.slash.circle")
    .symbolRenderingMode(.multicolor)
    .foregroundStyle(.red, .yellow, .green)
    .font(.system(size: 100))

위 포스팅 내용들은 “스윗한 SwiftUI(이봉원 지음)” 전자책을 보고 스터디 및 실습한 내용들을 기록하였습니다.