IcoMoonはオリジナルのアイコンフォントを作れるウェブ上のサービスです．僕の開発したFontBotamochiもIcoMoonを使って作成しています．具体的なIcoMoonの使い方はこちらなどで紹介されていますが，自作のSVG画像を登録する際の情報が不足しているように感じたので，ここでまとめておきます．
1. SVG画像のアップロード
SVG画像のアップロードは右上のハンバーガーボタンを押して，“Import to Set”を押すとファイルの選択画面が出るので，アイコンにしたいSVG画像を選択してください．
2. 線(Stroke)をアウトライン化する
アップロードするSVG画像には線 (Stroke) を含めないでください．IcoMoonではすべての線が無視されるため，アウトライン化してください，線のままアップロードしたら，上の画像のように警告が出ます．
3. 色を一色にする
図形の色は一色にしておいてください．複数の色が存在するまま，アップロードすると上の画像のような警告が出ます．実際に試してはいませんが，色ごとにコードが割り振られるもよう．トラブルの元になりそうなので，単色にした方が無難です．ちなみに，単色ならば赤でも青でも大丈夫なようです．
4. コードの割り振りに注意する
IcoMoonのコードの割り振りはかなりいい加減です．一度しか出さない場合ならば問題ありませんが，アイコンを追加する場合は以前のコードの割り振りと異なっている可能性が高いため，注意してください．
コメント