[SwiftUI]SF Symbols Imageの太さ(Weight)を変えるには？

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

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

方法

SF SymbolsのImageの太さを変えるには、font修飾子を使います。

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

そして、font修飾子の引数にフォントを指定します。

フォントの後に「.weight()」を記述し、weight内に太さを指定します。

Image(systemName: "name")
    .font(.フォント.weight(.太さ))

もし、太さと一緒にサイズを変えたい場合は、font修飾子の引数に「.system()」を指定します。

systemの引数「size」にサイズ、引数「weight」に太さを指定します。

Image(systemName: "name")
    .font(.system(size: サイズ, weight: .太さ))

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "house")
                .font(.largeTitle.weight(.ultraLight))
            Image(systemName: "house")
                .font(.largeTitle.weight(.medium))
            
            Image(systemName: "house")
                .font(.system(size: 50, weight: .light))
            Image(systemName: "house")
                .font(.system(size: 50, weight: .bold))
        }
    }
}