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