はじめに
これは、svgフォントをする際に私がつまづいた点の解決法をまとめたものです。あしからず
SVG font
案件によっては、しばしば アイコン類を font-awesome よろしくsvgフォント化して管理していることでしょう。
Gulp Sketch
ここで非常にお世話になっている gulp sketch のことを書いておきます。
https://github.com/cognitom/gulp-sketch
非常に優秀な点は、テンプレートを自分で編集出来る点です。
個人的には、scss ファイル等のメタ言語ファイルに出力しつつ、mixinとして定義しておくことで アイコン自体を他の部品に導入できるように整えておくとかよくします。
ここら辺は今回関係ないので割愛。
アイコン化
じゃあ、アイコン化しましょうといわれて、そうそうできるものではない!(私だけかも)。
なぜなら私はデザイナーではなく、エンジニアよりな人間であるからだ(言い訳)。
とはいっても、こういうことはフロントエンドがよきようにやってしまう方が手っ取り早いケースが多いと思うので頑張って、メモ的な雰囲気で残します。
状況
以下にまとめます。
- アイコンは ai ファイルだった
- gulp-sketch, つまり sketch でアイコン化している。
というケースです。
陥りがちなケース
アイコンをコピペして出力したらまっくろ！
というもの。例えば、線だけの丸が真っ黒とかとか。なぜか？
path で書かれているからですね。
color は 閉じた path の内側に塗られるから。当たり前か。
対応
sketch には便利な機能があります。
vectorize stroke
というもの。簡単にいうと、パスをベクター化する。まんまですね。
場所は Layer > Paths の中にあります。
こうすることで、path がそれ自身で囲まれた パスに変わります。
これで一安心。というわけでした。