[SwiftUI]SF SymbolsのImage(画像)の色を変えるには？

どうも、ちょげ(@chogetarou)です。

SF SymbolsのImageの色を変える方法を紹介します。

方法

Sf SymbolsのImageの色を変えるには、foregroundColor修飾子を使います。

まず、ImageにforegroundColor修飾子を付与します。

そして、foregroundColor修飾子の引数に色を指定します。

Image(・・・)
  .foregroundColor(color)

引数に色を指定したforegroundColor修飾子を付与することで、SF SymbolsのImageの色を変えることが出来ます。

SF SymbolsのImageに「.renderingMode(.original)」を付与することで、複数の色をレンダリングできます。

Image(systemName: "cloud.sun.rain.fill")
    .renderingMode(.original)
    .resizable()
    .frame(width: 200, height: 150)
    .background(Color.gray)

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "house")
                .resizable()
                .frame(width: 200, height: 150)
                .foregroundColor(.red)
        }
    }
}