アイコンを出す ― Image と SF Symbols

導入

アプリらしさはアイコンから。Appleは何千もの美しいアイコン SF Symbols を用意していて、SwiftUIから名前を指定するだけで使えます。

説明

Image(systemName: "名前") でSF Symbolsのアイコンを表示します。

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "heart.fill")
                .font(.largeTitle)
                .foregroundColor(.red)
            HStack(spacing: 16) {
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)
                Image(systemName: "bell.fill")
                Image(systemName: "gearshape.fill")
                    .foregroundColor(.gray)
            }
            Label("お気に入り", systemImage: "bookmark.fill")
        }
        .padding()
    }
}

アイコンも Text と同じく .font(...) で大きさ、.foregroundColor(...) で色を変えられます。Label("文字", systemImage: "アイコン名") を使うと、アイコンと文字をセットで並べられます。

代表的な名前：heart.fill（ハート）star.fill（星）house.fill（家）person.fill（人）cart.fill（カート）trash（ゴミ箱）magnifyingglass（虫めがね）plus（＋）など。

やってみよう

systemName を "house.fill" や "cart.fill" に変えて、いろいろなアイコンを表示してみましょう。色や大きさも変えてみてください。

演習

Image(systemName:) で家のアイコン house.fill を、色 .green で表示してください。