blogSVGスプライトをnpm-scriptsで作ってみる2018年5月2日GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。結果、凄い分かりやすいページを発見!これをいわゆるSVGスプライトと言っていいかは謎ですが。Mediumで、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。みんなの救世主、テンプレートエンジン。画像を小さくしてくれるやつ。SVGOのためのimageminのプラグインです。svgstoreのコマンドラインツール。svgをsymbolタグにまとめてくれます。当たり前すぎて存在を忘れるやつ。6つのパッケージが必要です。--save-devとか書いてインストールしてください。これを使って何をするかざっくり言うと、imagemin-svgoでsvgをなるべく小さくして、svgstore-cliでsvg-spriteを作成し、さらに使いやすくするためにデモページも作成しちゃいます。package.jsonを書きましょうって言っても、参照サイトのパスが変わってるだけのものですが。wordpressで使えるように、基本/wp-content/themes/YOURTHEME/dev/の中で全部済ませてしまう構成を想定しています。(pacage.jsonはdev直下に。)使いたいSVGをディレクトリに入れるここではdev/svg/icons/以下に入れます。最適なファイル名にして入れてください。ファイル名が呼び出し名になるので。いうファイルを作成します。これもパスを変えただけ。prebuildspriteで、実行。imagemin-svgo色々出来るみたいですが、ここではtitleとstyleを削除して、数値を2桁?に丸めてるらしい。そもそもキレイなSVGなら要らない作業ですが、其の場合はdist/icons/の中にsvgファイルを入れちゃってください。buildspriteで、dev/svg/dist/svgsprite.svgっていう、svgスプライトが出来ます。(まだ外部ファイル読み込みで試してないのでご容赦を。)ejsを使ってテンプレートとして出力wordpressを想定しているので、/wp-content/themes/YOURTHEME/template-parts/global/svgsprite.phpへ出力するようにejsを書きましょう。いうファイルを作成します。16行目で出力しています。これをfooter.phpとかに引っ張ってくればインラインでSVGが使えるようになります。先程のembed-sprite.jsの後半で作成しているのですが、そのためにデモページ用のejsを書いておきます。いうファイルを作成します。これもほとんど変えてないんですが、元ファイルにパースエラーがあったので修正。あ、styleも反映出来るようになっているので、dev/svg/svgsprite-demo.cssというのも作成してください。出力されてデモを見ながらサクサクSVGを書けるようになります。svgspriteすれば新しいspriteが作成されて、デモも更新されます。数時間で使えるようになったので、もっと早くやれば良かったな、と思ったりしました。アイコンフォントはgulpのライブラリを使っていたので、コッチだと全部npm-scriptsで済んじゃうからスッキリ。あとは、先ずはゴッソリ全部HTMLに読み込む形にしちゃったけど、その辺どうなんだろうなあ。20:36):svgタグの生成がイマイチなので、SVGOのドキュメントをチェックしてみました。false},を追記しました。【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみたこの記事を書いた人mimi主に書いている人。