The Util Designer
SwiftUI 使用多顏色設置SF Symbols
xcode 13.3.1, swift 5.5, iOS 15.4
2022-08-10
SF Symbols是Apple出版的符號集，現時已是第4代了，包含了超過4000個符號，我們來看看可以在App中如何使用SF Symbols。
1. 從SF Symbols中找到一個symbol - cloud.sun.rain.fill，並顯示出來。
import SwiftUI

struct SFSymbolViewExample: View {
    var body: some View {
        Image(systemName: "cloud.sun.rain.fill")
            .resizable()
            .scaledToFit()
    }
}
2. 可以使用foregroundColor改變顏色。
import SwiftUI

struct SFSymbolViewExample: View {
    var body: some View {
        Image(systemName: "cloud.sun.rain.fill")
            .resizable()
            .scaledToFit()
            .foregroundColor(.blue)
    }
}
3. 在SF Symbols 4可以使用多種顏色，我們可以在SF Symbols預先使用設計模式去設計和預覧。如下圖選擇Palette Rendering模式，并選擇不同的顏色。
4. 在代碼中也可以做一樣的設置，使用symbolRenderingMode設置為palette模式，三種不同的顏色使用foregroundStyle來設置，代碼實現如下。
import SwiftUI

struct SFSymbolViewExample: View {
    var body: some View {
        Image(systemName: "cloud.sun.rain.fill")
            .symbolRenderingMode(.palette)
            .resizable()
            .scaledToFit()
            .foregroundStyle(Color.gray, Color.orange, Color.blue)
    }
}