IcoMoonの注意点

IcoMoonはオリジナルのアイコンフォントを作れるウェブ上のサービスです.僕の開発したFontBotamochiもIcoMoonを使って作成しています.具体的なIcoMoonの使い方はこちらなどで紹介されていますが,自作のSVG画像を登録する際の情報が不足しているように感じたので,ここでまとめておきます.

1. SVG画像のアップロード
import-svg
SVG画像のアップロードは右上のハンバーガーボタンを押して,Import to Set”を押すとファイルの選択画面が出るので,アイコンにしたいSVG画像を選択してください.

2. 線(Stroke)をアウトライン化する
stroke-ignore
アップロードするSVG画像には線 (Stroke) を含めないでください.IcoMoonではすべての線が無視されるため,アウトライン化してください,線のままアップロードしたら,上の画像のように警告が出ます.

3. 色を一色にする
single-color
図形の色は一色にしておいてください.複数の色が存在するまま,アップロードすると上の画像のような警告が出ます.実際に試してはいませんが,色ごとにコードが割り振られるもよう.トラブルの元になりそうなので,単色にした方が無難です.ちなみに,単色ならば赤でも青でも大丈夫なようです.

4. コードの割り振りに注意する
IcoMoonのコードの割り振りはかなりいい加減です.一度しか出さない場合ならば問題ありませんが,アイコンを追加する場合は以前のコードの割り振りと異なっている可能性が高いため,注意してください.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です