SVGスプライトをnpm-scriptsで作ってみる

GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。

ターゲットはSVG。

ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。

結果、凄い分かりやすいページを発見！これをいわゆるSVGスプライトと言っていいかは謎ですが。

Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium

で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。

必要なパッケージ

ejs … みんなの救世主、テンプレートエンジン。
imagemin … 画像を小さくしてくれるやつ。
imagemin-svgo … SVGOのためのimageminのプラグインです。
svgstore-cli … 今日の主役的な。svgstoreのコマンドラインツール。svgをsymbolタグにまとめてくれます。
glob … 縁の下の力持ち的な。
rimraf … 当たり前すぎて存在を忘れるやつ。

の6つのパッケージが必要です。

npm install ejs --save-dev

とか書いてインストールしてください。

これを使って何をするか

ざっくり言うと、imagemin-svgoでsvgをなるべく小さくして、svgstore-cliでsvg-spriteを作成し、さらに使いやすくするためにデモページも作成しちゃいます。

package.jsonを書きましょう

って言っても、参照サイトのパスが変わってるだけのものですが。 wordpressで使えるように、基本/wp-content/themes/YOURTHEME/dev/の中で全部済ませてしまう構成を想定しています。（pacage.jsonはdev直下に。）

使いたいSVGをディレクトリに入れる

ここではdev/svg/icons/以下に入れます。最適なファイル名にして入れてください。ファイル名が呼び出し名になるので。

先ずはsvgを小さくする

dev/svg/imagemin-svgo.js というファイルを作成します。これもパスを変えただけ。

npm run prebuildsprite

で、実行。imagemin-svgo色々出来るみたいですが、ここではtitleとstyleを削除して、数値を2桁？に丸めてるらしい。そもそもキレイなSVGなら要らない作業ですが、其の場合はdist/icons/の中にsvgファイルを入れちゃってください。

（※ 追記があります）

SVGスプライトを作成

npm run buildsprite

で、dev/svg/dist/svgsprite.svgっていう、svgスプライトが出来ます。多分。（まだ外部ファイル読み込みで試してないのでご容赦を。）

ejsを使ってテンプレートとして出力

wordpressを想定しているので、/wp-content/themes/YOURTHEME/template-parts/global/svgsprite.phpへ出力するようにejsを書きましょう。 dev/svg/embed-sprite.js というファイルを作成します。 16行目で出力しています。これをfooter.phpとかに引っ張ってくればインラインでSVGが使えるようになります。

さらにデモページを作成

先程のembed-sprite.jsの後半で作成しているのですが、そのためにデモページ用のejsを書いておきます。 dev/svg/svgsprite-demo.ejs というファイルを作成します。これもほとんど変えてないんですが、元ファイルにパースエラーがあったので修正。あ、styleも反映出来るようになっているので、dev/svg/svgsprite-demo.cssというのも作成してください。

これで、

npm run embedsprite

とすれば、/wp-content/themes/YOURTHEME/template-parts/global/svgsprite.php と、/wp-content/themes/YOURTHEME/dev/svg/dist/svgsprite-demo.html が出力されてデモを見ながらサクサクSVGを書けるようになります。

ということで、SVGを追加したら、

npm run prebuildsprite

して、

npm run svgsprite

すれば新しいspriteが作成されて、デモも更新されます。便利！

感想

数時間で使えるようになったので、もっと早くやれば良かったな、と思ったりしました。
アイコンフォントはgulpのライブラリを使っていたので、コッチだと全部npm-scriptsで済んじゃうからスッキリ。
あとは、先ずはゴッソリ全部HTMLに読み込む形にしちゃったけど、その辺どうなんだろうなあ。（こうしてSVGの沼にまたひとり・・・）

追記（2018/05/02 20:36）：

svgタグの生成がイマイチなので、SVGOのドキュメントをチェックしてみました。

svg/svgo: Node.js tool for optimizing SVG files

vewboxを削ってしまうようなので、imagemin-svgo.js に

 {removeViewBox: false},

を追記しました。

追記（2018/05/04 12:47）：

おまけ -> インラインSVGを出してくれるショートコード

CSSにもインライン化 -> 【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた