2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アイコンに悩んだらSFSymbolsを使えばいいじゃない

Posted at

まえがき

ボタンなどにアイコンを使うとき、何を使えばいいのか非常に迷います。
毎回規約を確認しながらフリー素材をネットの海から拾ってきたり。
自分でiOS標準っぽいアイコンを作ったりしたり。
そんなことをする前に、まずはSF Symbolsに使えそうなアイコンがないか探してみればいいじゃない。

SF Symbolsとは

SF SymbolsはAppleが提供しているシンボルフォントです。
FontAwesomeみたいなもんです。
UIImageとして使えるのでアイコンを表示させたい様々な場面で活用できます。

ダウンロード

Xcodeプロジェクトに特別ライブラリなどを導入せずともデフォルトで利用できます。
ただMacのSF Symbolアプリが提供されていますのでこちらをインストールすると
どんなシンボルがあるのか確認しやすくなるので入れておくといいでしょう。

使い方

例えばシェアボタンのアイコンであればこんな感じ。
square.and.arrow.up@2x.png

let icon = UIImage(systemName: "square.and.arrow.up")

色を変えたい場合はtintで変えられます。

let icon = UIImage(systemName: "square.and.arrow.up")?.tint(with: .red)

もしくはwithConfiguration引数にUIImage.SymbolConfigurationを渡したり。

let icon = UIImage(systemName: "square.and.arrow.up", withConfiguration: UIImage.SymbolConfiguration(paletteColors: [.red])

大きさもUIImage.SymbolConfigurationで設定できます。

let icon = UIImage(systemName: "square.and.arrow.up", withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 50)))

もしくはUIImageにした後、シンボルのアス比を考慮してリサイズ処理を作っても良いでしょう。

あとがき

アプリ開発はそれなりにやっていましたが、つい最近までSF Symbolsの存在を知りませんでした。
使ってみるとかなり便利で、特殊なものでなければ基本これ使えばいいじゃんって感じで笑いが止まりません。
ただしシンボルの中には特定のサービスを示す時のみ使えるといった表記のものもあります。
例えばiCloudの雲マークのシンボルとかです。
App Storeにリリースするアプリの場合、使ったシンボルが用途に適しているのか気にする必要はありそうです。

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?