【SwiftUI】SF Symbolsの使い方

SF SymbolsをSwiftUIで使う方法について解説します。

スポンサーリンク

環境

この記事で紹介する内容は、以下のバージョンでの動作を確認しています。

【Xcode】15.0.1
【iOS】17.0
【macOS】Ventura 13.6.1
スポンサーリンク

SF Symbolsとは?

Appleが提供する5,000種類以上のシンボルを備えたアイコンセットです。Appleプラットフォームにおけるアプリケーションへの使用を目的にしており、システムフォントのSan Franciscoとシームレスに統合するようデザインされています。

次のサイトでダウンロードできるSF Symbolsアプリをインストールすると、使用可能なシンボルの一覧を検索できます。

SF Symbols - Apple Developer
With over 6,000 symbols, SF Symbols is a library of iconography designed to integrate seamlessly with San Francisco, the...

本記事執筆時点はSF Symbols 5が最新版です。

UntitledImage

スポンサーリンク

システムシンボルの表示

SF Symbolsで用意されているシステムシンボルを表示するには、画像表示のImageビューを使用します。

systemName
システムシンボルの名称を指定します。

【使用例】

UntitledImage

Labelでの使用

【SwiftUI】 Labelの使い方で解説しているLabelビューでもSF Symbolsが使用できます。

【使用例】

UntitledImage

スポンサーリンク

システムシンボル名の取得

システムシンボル名は、SF Symbolsアプリで調べられます。対象シンボルを右クリックし「1個の名前をコピー」で名称がコピーできます。
UntitledImage
他の選択として「1個のシンボルをコピー」を選択すると、フォントとしてコピーされますので、keynoteなどに文字としてシンボルを貼り付け可能です。
また、「1個のイメージをコピー」を選択すると、イメージデータとしてコピーされますので、Finderにペーストするとpngファイルができます。

スポンサーリンク

サイズの指定方法

SF Symbolsは通常の画像イメージとして扱えますので、前の例で示したように、.resizable()と.frame()でサイズの指定ができます。画像のサイズ変更については、【SwiftUI】画像(Image)の使い方で詳しく解説しています。

さらに、テキストフォントとしても扱えますので、次のように.font()モディファイアでのサイズ指定も可能です。

.font()モディファイアの詳しい使い方は、【SwiftUI】フォントの指定方法(font)で解説しています。

【使用例】

UntitledImage

スポンサーリンク

色の指定方法

SF Symbolsの色指定は一般的なViewと同様に、次の2つのModifierを使用します。

引数のShapeStyleには、Colorの他にグラデーションやImage等、ShapeStyleプロトコルに準拠したViewが指定できます。詳しい解説は【SwiftUI】色の指定方法(Color)を参照して下さい。

【使用例】

UntitledImage

スポンサーリンク

レンダリングモードの指定

シンボルの中には、いくつかのレンダリングモードをサポートするものがあります。
SF Symbolsアプリを使うと、次の手順で使用可能なレンダリングモードが確認できます。

  1. インスペクタ表示
  2. 情報インスペクタを選択

UntitledImage

レンダリングモードを指定するには、次のモディファイアを使用します。

以降では各レンダリングモードの違いと使用方法を解説します。

モノクロ(.monochrome)

シンボルを前景色で塗りつぶした単一レイヤーとしてレンダリングします。

【使用例】

UntitledImage

階層(.hierarchical)

各レイヤーに異なる不透明度を適用します。前景色が指定可能です。

【使用例】

UntitledImage

パレット(.palette)

各レイヤー毎に色を指定できます。
レイヤーの数はシンボルによって異なります
色の指定は、.forgroundStyle()モディファイアに2つまたは3つの引数を指定します。

なお、レンダリングモードを明示的に指定せずに、複数階層の色指定をした場合もパレットレンダリングモードが適用されます。

【使用例】

UntitledImage

マルチカラー(.multicolor)

シンボル毎に定義されたオリジナルの配色で表示します。
.foregroundStyle()でメインカラーが変更可能なシンボルがあります。

【使用例】

UntitledImage

スポンサーリンク

変数値を持つシンボル

SF Symbolsには変数値を与えると表示が変化するものがあります。SF Symbolsアプリで「可変カラー」のカテゴリに属するシンボルで、下記のように電波の受信感度を表すようなアイコン等が含まれています。
UntitledImage

これらの変数値を持つシンボルに、値を指定しながら表示するには、次のイニシャライザを使用します。

variableValue
変数値を持つシンボルに対して、0.0から1.0の間の数値(Double型)を指定します。
シンボルが変数値をサポートしていない場合、このパラメーターは何の効果もありません。

【使用例】
スライダーで値を変えると、シンボルが変化していくサンプルコードです。

UntitledImage

スポンサーリンク

シンボルの派生タイプ(Variant)指定

システムシンボルの中には、塗りつぶしバージョンや円に囲まれたものなど、いくつかの派生タイプを持つものがあります。
例えばハート型シンボルには下記のような派生タイプが存在します。

UntitledImage

次のモディファイアを使うと、完全なシンボル名称を使わずとも、派生タイプのシンボル指定が可能です。
また、複数シンボルの派生タイプをまとめて追加もできます。

派生タイプ(Variant)に使用できるパラメータは以下の通りで、モディファイアの重ね合わせ、または1回の呼び出しで複数の派生タイプをまとめて適用できます。

派生タイプ 内容
none 無指定
circle 円に囲まれたバージョン
square 正方形に囲まれたバージョン
rectangle 長方形に囲まれたバージョン
fill 塗りつぶされたバージョン
slash 斜め線の入ったバージョン

【使用例】

UntitledImage
重ね合わせや、まとめて指定する際の派生タイプの順番は、特に影響しません。
また、指定した派生タイプのシンボルが存在しない場合、指定は無視されます。
実行結果をみると、人物(person)には、斜め線+円のパターンがありません。また検索アイコンには斜め線のパターンが存在しないため、指定が無視されているのがわかります。

派生タイプ指定の解除について

派生タイプは積み重ねで設定されますので、既に何らかかの派生タイプが指定された後で、無指定のnoneを追加で指定しても設定済の派生タイプは解除できません。

この影響で不都合なケースがあります。

iOSではTabバーに塗りつぶしシンボルを使うのが推奨されていますが、これに従いTabバーに配置したシステムシンボルには、自動的に塗りつぶしの派生タイプ(.fill)が設定されるようになっています。
UntitledImage
塗りつぶしではなく、どうしてもデフォルトのシンボルを使いたい場合は、次のモディファイア使用しましょう。既に設定されている派生タイプを解除できます。

【使用例】

UntitledImage

スポンサーリンク

あわせて読みたい記事

【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。 Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
【SwiftUI】フォントの指定方法(font)
(2020/12/02 更新) フォントの指定方法を解説します。