[SwiftUI]SF Symbols Image(画像)のサイズ(size)を変える(change)には？

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

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

方法
1. font
2. frame
まとめ

方法

SF Symbols Imageの色を変える方法は、２つあります。

font

１つは、font修飾子を使う方法です。

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

そして、font修飾子の引数「.system()」を指定し、systemの引数「size」にサイズを指定します。

Image(systemName: "name")
    .font(.system(size: サイズ))

font修飾子で指定したサイズがSF Symbols Imageのサイズになります。

font修飾子の引数にフォントを指定する方法でも、SF Symbols Imageのサイズを変えることが出来ます。

Image(systemName: "house")
    .font(.body)

Image(systemName: "house")
    .font(.largeTitle)

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "house")
                .font(.system(size: 50))
            Image(systemName: "house")
                .font(.system(size: 75.5))
            Image(systemName: "house")
                .font(.system(size: 100))
        }
    }
}

frame

もう１つは、frame修飾子を使う方法です。

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

そして、Imageにframe修飾子を付与します。

frame修飾子の引数「width」に横幅、引数「height」に高さを指定します。

Image(systemName: "name")
    .resizable()
    .frame(width: 横幅, height: 高さ)

frame修飾子で指定した横幅と高さが、SF Symbols Imageのサイズになります。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "house")
                .resizable()
                .frame(width: 30, height: 30)
            Image(systemName: "house")
                .resizable()
                .frame(width: 50.0, height: 70.0)
            Image(systemName: "house")
                .resizable()
                .frame(width: 150, height: 100)
        }
    }
}