はしばみあきら blog

プログラミングアウトプットするブログ。202010スタート

【SwiftUI】SF Symbols でアイコン表示

SF symbol というアイコンを表示するコードがあります。

画像を用意しなくても簡単な画像を使うことができます。


SF Symbolアプリ

どのようなアイコンがあるかは、アプリをダウンロードしそこから検索することができます。

ダウンロードサイト

developer.apple.com

アイコンを表示する

プロジェクトを立ち上げた時点のビュー


f:id:hashibamiakira:20210319001701p:plain

Hello World! を変えてみます

struct ContentView: View {
    var body: some View {
        // SF Symbols 表示
        Image(systemName: "sun.min")
    }
}

アイコンが表示されました

大きさや色の指定

ただ、かなり小さいのでサイズを変えます

また、色をつけて、他のアイコンも表示してみます

struct ContentView: View {
    var body: some View {
        // SF Symbols 表示
        VStack{
            Image(systemName: "sun.min.fill")
                // 色を付ける
                .foregroundColor(.orange)
                // 画像サイズ変更(.small, .medium, .large から選択)
                .imageScale(.large)
                .padding(10.0)
            
            Image(systemName: "moon.fill")
                .foregroundColor(.yellow)
                .imageScale(.large)
                .padding(10)
            
            Image(systemName: "cloud.fill")
                .foregroundColor(.gray)
                .imageScale(.large)
                .padding(10)
        }
    }
}

このように表示することができました。