前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。 なお、インライン用のSVGスプライトの場合、(色情報等を削除するため)目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。 Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます(構成やディレクトリ等、ここで記載しているものとは若干異なります)。 https://github.com/42EG4M1/svg-sprite-generator gulp
![GulpでSVGスプライトを自動生成する | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/d425a58a239a6ad55915fdd931413712f75c44b6/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2016%2F08%2Fcatch-svg-sprite-generator-with-gulp.jpg)