WebpackでCSSのbackgroundにSVGをdata形式で埋め込む

Sassで下記のように定義しておきコンパイルすると

background-image: url('../file/logo.svg');

下記のようにするには

background-image: url("data:image/svg+xml,...");

svg-url-loaderを使うのが良い。yarn add -D svg-url-loaderとしてインストールした後、webpack.config.jsに下記のように定義するだけ。

module: {
rules: [
{ test: /\.svg$/, use: ['svg-url-loader']}
]
}

svg-inline-loaderとurl-loaderを組み合わせたりいろいろしたが、こいつが一番簡単だと教えてくれたのは @am_ さんのこの記事でした。死ぬほど助かった。これで早く帰れる。

単に手動でbase64エンコードしておけばいいだろうし、他の人が引き継いだ時はむしろ手動でエンコードしたものを入れておいたほうが長らくメンテナンスできる(経験上フロント系はJavaなどに比べるとどれだけしっかりやっても不安定になってしまう)と思うが、自分が楽なように作っておくのが一番楽。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA