GWに私は何をしているのでしょうか。
前回に引き続き、SVGについて。
前回のやり方ではCSSに読み込むスプライト画像が出来ないのでどうしようかなあと調べていたら、またまた良いものを発見しました。
postcss-inline-svg というライブラリです。
CSSそのものにSVGをインライン化するのを自動化してくれるライブラリ。神発見したと思った。って言っても、css inline svg npm で検索すれば直ぐ出てくるんだけども。
問題はPostCSSで作られているということです。Sassに慣れきってるのでPostCSS環境に合わせるの面倒・・・と思ったけれど、そこはnpm-scriptsの良いところ。これまでも、node-sassでcssに変換した後にautoprefixerを通していたので、さらにpostcss-inline-svg すれば良いだけでは・・・！?
と思って、package.jsonに
"svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",
としたら出来ちゃった。IE11でも動作しちゃった、のでご報告したいと思います。npm-scriptsを使ってる前提です。
必要なライブラリ
- cpx
… ファイルのコピーや監視機能を担ってくれるお利口さん。（でも未だにPostCSS直書きだと何がいけないのか良く分かってないまま使ってる） - postcss-inline-svg
… 今日の主役。CSSファイルに指定したSVGファイルをインライン化してくれます。
と、SVGファイルを最適化してくれるライブラリが要ると思います。私は、前回の記事のようにimagemin-svgoを使ってますが、postcss-inline-svgでは同じPostCSSのライブラリのpostcss-svgoをオススメしているみたいです。
使い方
- 上記のようにpackage.jsonに書いておきます。
- SVGファイルを最適化しておきます。ここでは前回のように、
node svg/imagemin-svgo.js
をします。 - SCSSにインライン化したいSVGファイルを記述します。
例えば、.m-btnというボタンに右矢印のSVGを右側にくっつけるならこんな感じで。
3−5行目と21行目の処が大事。 - これを一旦node-sassでcssにします。（省略 関連記事を参照してください）
- で、SVGをインライン化します。
npm run svginline
すると、
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='rgba(36, 36, 30, 0.3)'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E");こういう感じにインライン化してくれます。
ということで、こう書くと、
<span class="m-btn"><a class="m-btn__link" href="#">ボタン</a></span>
こんな感じになります。
このサイトにまだ導入してないので、スクショですみません。IE11、Edgeでも動作確認出来ました。やったー。（でも、githubではIE11とEdgeで出ないって言っている人もいます。-> SVG doesn’t appear in IE11 and Edge #43 多分、CSS側かSVGの最適化の方の問題な気もするけど。 ）
気に入ったので、watchに入れて使ってみています。
※ たぶん、PostCSS導入出来る人はさっさと移行した方が、watchの動作も早くなるので、Sassとの併用をオススメする記事ではありません。
感想
勝った、と思った（何に？）。
前述の、HTMLにインライン化だけだとちょっとなーと思っていたので、ベストな解が出たんじゃない？とニンマリしているのですが、アイコンが30個超えとかになったらちょっと困るかな？
SVGを扱うにはまず何より、SVG自体の最適化が大事だなーと思いました。でもイマイチ良く分かってなくても、賢いライブラリがなんとかしてくれるから、素敵な時代ですね。
あと、全然関係ないけど、私がPostCSSへの移行を渋るのは、ロゴがダサいという側面もあると思います。でも8割はただ面倒くさいだけです。
