【SwiftUI】SFSymbols について

はじめに

SF SymbolsはOS標準で持ってるUI画像データのことです。

SwiftUIのImageなどで使えるようになっています。

ベクター形式なので拡大してもガビガビにならないのも特徴です。

SFSymbolは画像ファイルを持たなくて使える便利なものである一方で、OSで使える/使えないがあるので注意が必要なものです。

OS縛りなので、Xcodeのバージョンがどうこうは関係なくそのアプリを起動するiOSによって使える使えないがあります。

使えない場合は表示されないだけ？という認識です。違ったらすみません。

SF Symbolsアプリがあるよ

Appleのサイトでダウンロード可能

developer.apple.com

このアプリを使うとSFSymbolsの各イメージをSVGファイルとして書き出せます

一覧とどのOSから使えるかというものが分かります。

SwiftUIでの使い方

 Image(systemName: "イメージ名")

色は自分で変える

ベクター形式なのでイメージは自分で変えるものです。

SwiftUIで変える場合はこんな感じになります。

・固定色

Image(systemName: "person")
    .foregroundColor(Color.red)

・RGBを指定

 Image(systemName: "person")
    .foregroundColor(Color(red: 1.0, green: 0.0, blue: 0.0, opacity: 1.0))

縦横比率が謎

縦と横の比率が１：１じゃないです。というかイメージごとに異なってます。

なのでサイズ指定すると多少歪みます

対策としては aspectRatio(contentMode: .fit) を使いましょう

Image(systemName: "person")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width:100, height:100)

こうすることで、好きなサイズを指定しつつ歪まないようにできます。