Zenn
🖼️

SwiftUi SFSymbolにあるアイコンを表示する方法

2024/04/09に公開
Swift
SwiftUI
tech

やること

アプリ上にSFSymbolのアイコンを表示する

筆者の環境

Xcode 15.3
Mac OS Sonoma 14.3.1

よくアプリで以下のようなアイコンを見かけませんか？

これをSwiftUi表示したいと思ってもどうやってやればいいか意外とわからないことありますよね
今回はAppleが用意している SFSymbolというアプリを使ってこういうアイコンを表示する方法を紹介します。

SFSymbolのダウンロード、インストール

まずここをクリックしてください。
そうすると SFSymbolと書いたサイトが表示されるので、右上のダウンロードボタンを選択して
SFSymbol 5.1をダウンロードしてください。

そして2分くらい待ってダウンロードされたdmgファイルを開くと
以下のような画面が出てくるので
SF Symbol.pkgをダブルクリックしてください。

そうしたらアプリの手順に従ってインストールしてください。
インストールが完了すると
Finder > アプリケーションに行き、見ると
このように SF Symbolsというアプリがあればインストール完了です。

SF Symbolsを使ってSwiftuiのアプリに表示しよう

インストールは完了したのでSwiftuiのアプリに色々な画像を表示してみましょう。

  1. アイコンの名前コピーしよう
    まず先ほどインストールしたSF Symbolsのアプリを開いてください
    そうすると以下のようにズラーと色々なアイコンが出てきますので
    何か一つ選択してみてください。
    自分は一番左上の square.and.arrow.up を選択してみます。

    そうすると右側に選択した画像の詳細が出てきます。

    その詳細からアイコンの名前をコピーしてください。

  2. アプリに表示してみよう
    コピーしたら読者様のXcodeプロジェクトでもいいですし新規で何か適当に作ったプロジェクトでもいいので
    開いてください。
    そうしたら

Image(systemName: "")

このコードのダブルクォーテーション中に先ほどご自身でコピーしたアイコンの名前を入れてください。
自分は square.and.arrow.upなので入れると

Image(systemName: "square.and.arrow.up")

こうなります
全体のコードだと以下のようになります

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "square.and.arrow.up")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

これで実行してみると...

このように自分がコピーしたアイコンが表示されます。

読んでいただきありがとうございました。

Discussion