SF Symbolsの楽しみ方

SF Symbolsの楽しみ方 2022/1/15 リルオッサ

自己紹介 Name: リルオッサ note: littleossa Github: littleossa Twitter: @littleossa 2

SF Symbolsを楽しんでいますか？

SF Symbolsとは

SF Symbolsとは • Appleが提供しているシンボルフォント • SF Symbols3.2時点では、3309個のシンボルを提供しています • これらをエクスポート後、ベクターグラフィック編集ツールで編集し てカスタムシンボルを作成できる • SFとは、Appleの提供しているSan Franciscoというフォントのことを 指している

メモApp SF Symbolsの恩恵 • Appleが公式で使用している高品質のアイコ ンを同じように使用できる • 個人開発者がアイコン作成にリソースを割か なくて良い • 様々な用途向けのシンボルが用意されてお り、かゆいところに手が届く

どのようなシンボルがあるのか

どのようなシンボルがあるのか 実際にアプリのアイコンとして使えそうなものから 「こんなものまであるんだ！」 「これ一体いつ使うんだ？」 というものまで 本当にバラエティ豊富で SF Symbolsのカタログを見るだけでも楽しいです

こんなものまであるんだ！

これ一体いつ使うんだランキング第3位 ※100%個人的な主観です 遺影

これ一体いつ使うんだランキング第2位 ※100%個人的な主観です 折り畳み携帯

これ一体いつ使うんだランキング第1位 ※100%個人的な主観です 脳みそ

SF Symbolsが気になった方は 今すぐインストール！

SF Symbolsの インストール方法 https://developer.apple.com/sf-symbols/ 1. このサイトにアクセス 2. 下部のダウンロードからダウン ロードしてインストールするだけ

• https://developer.apple.com/sf-symbols/

実際に使う

Imageとしてシンボルを使う 1. StoryboardにImageViewを追加 2. Imageのフォームに何か文字を入 力 3. SystemのImageとしてシンボルが 表示される ※ OSに依存するものも多く、使用出来ない場合は警告が出る

Imageとしてシンボルを使う コードから使用することもできます。 let image = UIImage(systemName:"person.crop.artframe") systemNameはSF Symbolsのシンボルの名前で、右クリックで名前の コピーを選択することが出来ます。 ※ コードから使用する場合は、OS依存により使用出来ない場合の警告は出ないので注意が必要です

scaleとweightも設定できる Storyboard コード let configuration = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .medium, scale: .large) let image = UIImage(systemName: "square.and.arrow.up", withConfiguration: configuration)

iOS15から使えるSF Symbolsに 複数のカラーを設定する方法

iOS15未満でのカラー設定方法 let image = UIImage(systemName: "face.smiling.fill") imageView.image = image systemeのImageを代入するだけでは、 デフォルトカラーの1色だけで装飾されています あるいは、 imageView.tintColor = .tintColor

パレットカラーを設定する let image = UIImage(systemName: "face.smiling.fill") let configuration = UIImage.SymbolConfiguration(paletteColors: [.black, .systemYellow]) imageView.image = image imageView.preferredSymbolConfiguration = configuration iOS15から使用できる UIImage.SymbolCon guration.init(paletteColors:)で SymbolCon gurationを生成して設定することでシンボルのイメージ fi fi に複数のカラーを割り当てることが出来ます

階層カラーを設定する let image = UIImage(systemName: "trash.slash") let configuration = UIImage.SymbolConfiguration(hierarchicalColor: .systemMint) imageView.preferredSymbolConfiguration = configuration imageView.image = image iOS15から使用できる UIImage.SymbolCon guration.init(hierarchicalColor:) でSymbolCon gurationを生成して設定することで指定した基本色の fi fi 強度を下げた色の値を他の階層のレイヤーの割り当てます。

マルチカラーを設定する let image = UIImage(systemName: "ladybug.fill") imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration.preferringMulticolor() imageView.tintColor = .brown imageView.image = image iOS15から使用できる UIImage.SymbolCon guration.preferringMulticolorメソッドを使用 すると、シンボルがマルチカラーバリアントを持っている場合は fi そのカラーが割り当てられます

SF Symbolsの真の楽しみ方

Title: DJ 全てSF Symbolsのみで作成しまし た。

推しのSF Symbolsを見つけて、 楽しんでください