Sketch iconsプラグインとFont Awesomeを使って、便利なアイコンのライブラリを作成する方法を紹介していきます。
何ができるかというと、
アイコンを簡単に追加できる 色の変更も簡単
必要な知識は、シンボルの使い方・ライブラりの使い方です。
では参りましょう〜
Sketch iconsを使ってSVGファイルからアイコンライブラリを作る
手順は以下
- Sketch icons / Font Awesomeの準備
- 色のシンボルを作成
- Sketch iconsでFont Awesomeをインポート
- ライブラリに追加
Sketch icons / Font Awesomeの準備
Sketch iconsからプラグインをダウンロードします。
Font Awesomeもダウンロードします。
ダウンロードしたSketch iconsのZIPファイルを解凍し、赤枠のsketchファイルをダブルクリックしプラグインをインストールしましょう。
インストール完了
Font AwesomeのZIPファイルを解凍し、以下のフォルダを確認しておく。
advanced-options/raw-svg
後ほどこのフォルダを使います。
＊なお、Font Awesomeじゃなくてもraw-svgというファイルがあれば同じように使えます。
色のシンボルを作成
Sketchを開いて、アイコンに使いたい色のシンボルを作ります。
こんな感じでとりあえずmain/dark/lightの3種類を作っています。
Sketch iconsでFont Awesomeをインポート
Plugins/Sketch Icons/Import iconsにいきます
すると、以下のような画面になります。
Color SourceでFrom Symbolsを選択することで、先ほど作ったシンボルの色を使用可能です。
この設定でContinueをクリックすると、インポートするアイコンファイルを選択する画面になりますので、先ほどのadvanced-options/raw-svgのフォルダを探します。
そしてそのフォルダの中のregularを選択し、command + aで全てのファイルを選択します。
すると、こんな感じでアイコンがズラーっとインポートされます。
colorにシンボルのカラーが使われていて、アイコンがマスクになっています。
なので、アイコンのマスクを外すと、こうなります。
ライブラリに追加
これをライブラリとして使いたいので、このファイルをcommand + sで保存します。
PreferencesでLibraryを選択します。
Add Libraryをクリックし、先ほどシンボルを保存したsketchファイルを開きます。
すると、Libraryにそのファイルが追加されています。
以上で完了です。
作成したライブラリを使ってみる
command + nで新しいsketchファイルを開き、Libraryを使ってみましょう。
こんな感じで、アイコンを簡単に選択できます。
アイコンの変更も簡単！
色のシンボルを作成したので、色も簡単に変更できます。
長便利ですね(^^)
シンボルの色を変えてみる
先ほど作ったシンボルのページに戻り、色を変えてみます。
保存して、先ほどの新しいファイルに戻ると、右上にこんな感じでNotifications(通知)が来ています。
クリックすると、シンボルをアップデートするかどうか聞かれますので、Update Symbolsをクリック
すると、変更したmainの色が変わります。
以上です。
めっちゃ簡単に使えて、便利なので試してみてください。