スマホコーディングにおいてアイコンのフォント化は当然の技術となっています。
また実は古いIEにも対応しているので（IE4から使えたらしい…？）、
cssによる、::beforeや::afterの擬似要素での指定を考えると、
IE8からであればほぼ問題なく使えるはず…です。
ただフォントデータを作るために、SVG書きだす必要があり、アイコンの数が多いほど制作に時間のかかる作業でした…。
今回は、そのSVG書き出し作業を一瞬で終わらせられるスクリプトの設定方法です。
JSXの設定
JSXとは
adobeツールをカスタマイズするためのスクリプトです。
javascriptでの記述で、オリジナルの機能を持たせることが出来ます。
本データの仕様
- スクリプト実行でレイヤー毎がSVGとして書き出される
- ファイル名はレイヤー名に準ずる
- ダウンロードフォルダを任意に指定
ダウンロード〜設定
gitにソースをアップしているので、こちらを使ってください。
https://github.com/lab3-34/layer_output_svg/tree/master
そのデータを、下記に保存すると自動的に実行対象になります。
/Applications/Adobe Illustrator CS6/Presets.localized/ja_JP/スクリプト
※mac cs6の場合です
※保存後、Illustratorを再起動すると反映されます
実行
実行は、Illustratorのメニューの下記から出来ます。
ファイル > スクリプト > layer_output_svg
【注意点】
仕様でも述べたように、レイヤー毎に書き出すような作りなので、データの作り方はデザイナーと相談していただければと思います。
アートボードのサイズですが、コーディング時の使いやすさと本スクリプトの仕様を考慮し、
縦・横と各アイコンの最大幅で設定し、データは上下左右センタ揃えで配置してください。
また、レイヤー名 = ファイル名となるのでリネームが発生しないように、ちゃんとしたレイヤー名を設定しましょう。
以下のような作りだと、コーダーがとても喜ぶと思います！！！！
