【脱gulp】webpackでsvg-spriteを使う2019/05/122019/06/12技術系gulpsvgsvg-spritewebpackgulpでのコーディング環境の記事はけっこうな量を見つける事ができますが、webpackになるととたんに少なくなります。”【脱gulp】webpackでpugを使う。jsonで一括ビルドも。“、”【脱gulp】webpackでstylusを使う。cssとして別ファイル化も。“に続き、今回はsvg-sprite(svgスプライト)をwebpackで使う方法を紹介します。目次gulpは悪くない。webpackでまとめた方がすっきりするだけ。インラインでbodyタグ直下に出力する方法です。“svgo-loader”あとはwebpack用のjsで.svgファイルを読んで、出力させたいところで使うだけおわりにgulpは悪くない。webpackでまとめた方がすっきりするだけ。gulpでできるほとんどの事はwebpackでできるので、webpackを一部だけ使うならいっそのこと脱gulpしてwebpackをベースにするのをゴリ押ししています。今回は、svg-spriteを使う方法です。インラインでbodyタグ直下に出力する方法です。今回のサンプルは、svgタグとしてbody開始タグ直後に出力するサンプルです。別ファイル化はしないので気をつけてください。使うローダーや注意点などをクリアすれば別ファイル化も難しくないので参考にしてみてください。“svgo-loader”svg-spriteを使うのは簡単です。ローダーを3種類読み込ませるとほぼ終わります。}}さて、ここでsvg-sprite-loaderのgithubのread.meを見てみましょう。https://github.com/kisenka/svg-sprite-loaderそして”Configuration”のコードの最下部にローダーを読ませている箇所があるんですが、svg-transform-loaderではなく、svg-fill-loaderとなっています。気をつけてください、これは罠です。このせいでかなり時間とられてしまいました。upgradeする時にwarnが出てて、よく見てみると、”svg-fill-loaderではなくsvg-transform-loaderを代わりに使って”的な感じで怒られました。いうより優しく注意して教えてくれました。これに気づくまで何度公式の使い方通りやってもできなかったのでホントきつかったです。あとはwebpack用のjsで.svgファイルを読んで、出力させたいところで使うだけこの記述だけで、imagesフォルダにある.svgファイルを全てbody開始タグ直後に出力してくれます。/\.svg$/))使いたい時はこうです。svgファイル名がidになります。use(xlink:href='#bars')htmlだとこうです。xlink:href="#bars"></use></svg>おわりにできるようになったらめちゃくちゃ簡単なんですが、罠にかかり時間とられました。日本語の情報量が少ないとホント大変です。僕もgithubで公開している者として正しい情報を扱うように注意したいと思います。ちなみに、cssのbackground-imageで使う方法なんかはまだわかりません。情報さぐっていつか追記できたらと思います。