8
Help us understand the problem. What are the problem?

posted at

updated at

【Swift】オリジナルのSFSymbolを作成する

素材

スクリーンショット 2022-05-05 0.18.06.png
今回はTwitterの公式から提供されている「Twitter logo」をSFSymbol化していこうと思います。

手順1

スクリーンショット 2022-05-05 0.18.52.png

初めに「circle」を選択します。

スクリーンショット 2022-05-05 0.19.02.png

「circle」を選択した状態で
ファイル → カスタム・シンボル・テンプレートを書き出す
実行してファイルを保存しましょう。

スクリーンショット 2022-05-05 0.19.18.png

私は「twitter.svg」で保存しました。

手順2

Twitter公式からダウンロードしたデータの「Logo black.svg」を使用します。
スクリーンショット 2022-05-05 1.02.25.png

「Logo black.svg」を開くとこのようになっています。
<path>がSVGの形を作っています。
こちらをコピーしてください。

スクリーンショット 2022-05-05 0.22.57.png

続いてSFSymbolsで書き出したファイルを開いてください。
下の画像で選択している箇所に先ほどコピーしたものをペーストしましょう
スクリーンショット 2022-05-05 0.25.03.png

このようになったはずです。
高さと大きさがおかしいですね
調節していきます。
_nts_twitter.svg.png

下の画像で選択している箇所で大きさと位置を決めています。
スクリーンショット 2022-05-05 0.26.57.png
調節が終わるとこんな感じになります。
今回はWeightの違いはないので全て同じにしています。
これをあと2行やっていきます。
1.png

こうなったらCustomSymbolの完成です。
2.png

手順3

XCodeで読み込んでいきます。
通常の画像と同様に「Assets.xcassets」にドラッグするだけで大丈夫です。
スクリーンショット 2022-05-05 1.20.13.png

あとは通常の画像のように使用が可能です。
スクリーンショット 2022-05-05 1.22.52.png

追記

↑ こちらのサイトのアイコン約1200個をSFSymbolにしました。 ↑
↓ ぜひ使ってみてください ↓

おわり

現在、SwiftUIでSVGを扱おうとするとちょっと苦労するのでこれは楽ちんで良いです。
よく使うSVGなどはSFSymbolに変換後、パッケージ化して再利用可能にしておくと開発がスムーズに進んで良いかもしれないですね!
さん
サンプルを上げておくので参考にしてください

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
8
Help us understand the problem. What are the problem?