[SwiftUI] SF Symbols 색상 바꿔서 사용하기

 

오늘은 SwiftUI에서 SF Symbols 사용 방법과 아이콘 색상을 변경하는 방법에 대해서 살펴볼 예정입니다.

먼저 SF Symbols 란?

공식 문서: https://developer.apple.com/sf-symbols/

SF Symbols - Apple Developer

 

공식문서에 적혀 있듯이 Apple 플랫폼의 시스템 서체인 San Francisco와 매끄럽게 통합되도록 설계된 6,000개가 넘는 기호 라이브러리 입니다. 그래서 SF Symbols에 있는 기호를 사용하려면 별 다른 라이브러리를 import 하거나 이미지 리소스를 추가하지 않아도 사용할 수 있습니다.

 

저희 눈에 제일 익숙한 사용 방법이 이거죠!

Image(systemName: "cloud.drizzle.fill")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 26, height: 26)

• resizable() + frame() 메서드를 사용해서 아이콘 크기를 변경 할 수 있어요.
• aspectRation()를 사용하면 컨텐츠 모드의 옵션을 변경 할 수 있어요.

만약 색상을 바꾸고 싶다면? 🎨

➡️ foregroundStyle만 추가해주면 돼요!

Image(systemName: "cloud.drizzle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 26, height: 26)
                    .foregroundStyle(.white)

 

 

근데 솔직히 구름에서 비가 내리는 아이콘이면 구름은 흰색, 비는 파란색이어야 더 자연스럽자나요?? 🌧️

Image(systemName: "cloud.drizzle.fill")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 26, height: 26)
    .symbolRenderingMode(.multicolor)

 

.symbolRenderingMode(.multicolor) 요 코드를 추가해주면 알아서 컬러를 알맞게 변경해줍니다.

 

근데 만약에 자동으로 지정해주는 컬러가 마음에 안들면 palette 모드를 사용하면 됩니다!

그리고 그 안에 foregroundStyle에서 원하는 컬러를 넣어주면 됩니다.

Image(systemName: "cloud.drizzle.fill")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 26, height: 26)
        .symbolRenderingMode(.palette) // 팔레트 렌더링 모드 사용
        .foregroundStyle(.white, .yellow)
        .symbolEffect(.scale)

 

그러면 symbolRenderingMode는 뭘까요??

공식문서: https://developer.apple.com/documentation/swiftui/symbolrenderingmode

SymbolRenderingMode | Apple Developer Documentation

 

공식문서를 보면 아주 간단하게 적혀있어요. 심볼 랜더링 모드. 이게 끝입니다...ㅋㅋ

밑에 렌더링 모드에 대한 설명과 종류가 있어요.

 

 

 

근데 심볼 모드 마다 아이콘이 어떻게 생겼는지 궁금하자나요??

그럴때 쓰는게 SF Symbols 앱입니다! (여기서 다운로드 받을 수 있어요!) 📥

그러면 노트북에 요 앱이 설치 됩니다.

 

 

 

정말 다양한 기능이 있는데 하나씩 살펴볼게요!

1. 검색 기능

 

2. 랜더링 모드

심볼을 하나 선택해서 누르면 오른쪽에 인스펙터가 열리고, 왼쪽 부터 정보, 랜더링, 애니메이션 인스텍터를 볼 수 있어요.

그리고 아까 공식문서에서 보았던 랜더링 모드도 어떻게 적용되어 있는지 여기서 한 눈에 볼 수 있습니다!

 

 

 

 

           1) monochrome

           2) hierarchical

           3) palette

           4) muticolor

 

 

 

3. 애니메이션

 

 

 

 

 

 

 

애니메이션은 옵션을 선택하고 미리보기를 눌러주면

애니메이션이 어떻게 보일지 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

상세 옵션까지 변경해주고

📑 이렇게 생긴 아이콘을 클릭하면 코드 복사까지 가능합니다!! 😲

 

 

 

 

 

다들 애플에서 제공하는 SF Symbols 다운받으셔서 심볼의 다양한 옵션 둘러보세요~ 🙌🏻