Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

SF Symbolsのインストールと使用方法

Last updated at Posted at 2020-11-20

この記事は、iOSアプリ開発から公開までの流れ の第5章です。

本稿では、SF Symbols ツールのインストールから利用までの手順を記載します。
このツールにより、iOS で利用可能な SF Symbols(以下「アイコン」)を一覧で確認できます。
個人レベルの iOS アプリ作成には不可欠だと思います。

(Apple サイトの Google 訳)
SF Symbolsは、アプリで使用できる2,400を超える一貫性のある高度に構成可能なシンボルのセットを提供します。 Appleは、サンフランシスコのシステムフォントとシームレスに統合するようにSFシンボルを設計したため、シンボルは、すべての太さとサイズのテキストとの光学的な垂直方向の位置合わせを自動的に保証します。

1. Apple のサイトからダウンロードします

SF Symbols 2 のページ途中に以下のリンクがあるので、最新の SF Symbols 2(上の方)をダウンロードします。
1.png

2. ダウンロードしたディスクイメージをマウントしてインストールを開始します
2.png
3. "続ける" で進めます
3.png
4. インストール完了
4.png
5. SF Symbols を実行

一覧でアイコンとアイコン名を確認できます。
5.png

6. 詳細情報も確認できます

右上の i マークをクリックするとインスペクタの領域が表示されます。
対応する iOS バージョンを確認できます。iOS 14.0 対応アイコンがたくさんあります。
6.png

7. 使用例をご紹介

4行目の Image にアイコン名を指定することで表示できます。

SwiftUI
        List {
            Section(header: Text("LOCAL ADDRESS")) {
                HStack {
                    Image(systemName: "globe")  // ここ!
                        .resizable()
                        .scaledToFit()
                        .frame(width: 22, height: 22, alignment: .center)
                    VStack(alignment: .leading, spacing: 2) {
                        HStack {
                            Text("127.0.0.1")
                                .font(.system(size: 20))
                            Spacer()
                        }
                        HStack {
                            Text("localhost")
                                .font(.system(size: 12))
                                .foregroundColor(Color.init(UIColor.systemGray))
                            Spacer()
                        }
                    }
                    .padding(.leading)
                }
            }
        }
        .listStyle(PlainListStyle())

外観モードにも対応しています。
7.jpeg

8. シミュレータの外観モードを変更するには

Settings > Developer > Dark Appearance のトグルスイッチで変更できます。
8.jpeg

終わり。

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?