Posted at

SFSymbolsAppを使ってsystemNameに設定できる名前を知る


この記事について


Image(systemName: "photo")

Appleが提供するimageはphoto以外には何があるか知りたいという欲に答え

あわよくばデザインを確認しながら設定したいための環境を整える記事になります。



(WWDCの動画のスクショ


SF Symbols Appをダウンロード

sf-symbols

こちらのサイトよりSF Symbolsをダウンロードしてください

無事インストールがすめば以下のアイコンのアプリケーションが入ってます。


確認しながらImageを設定してみる

インストールしたSF Symbolsアプリを開くとたくさんのアイコンが表示されてます!

SF Symbols provides a set of over 1,500 consistent

たくさん用意されてますね!

モックとかSF Symbolsに含まれるデザインで要件満たせたりするとコスパ良さそう

struct CollectionView: View {

var body: some View {
VStack (alignment: .center){
HStack {
Image(systemName: "gamecontroller")
Image(systemName: "gamecontroller.fill")
}
HStack {
Image(systemName: "gift")
Image(systemName: "gift.fill")
}
HStack {
Image(systemName: "app")
Image(systemName: "app.fill")
}
}
}
}


さいごに

Custom Symbolについては今回触れませんでしたが、独自にデザインを用意できるみたいです。

こちらについては対応が必要になった際に対応してみて感じたことがあれば追加記載使用と思います!