いくつかローダーあったけど、これが素直でした。
npm i svg-url-loader -D
でWebpackの設定は
const path = require('path');
module.exports = {
entry: {
console: './src/console/index.js'
},
output: {
filename: './static/dist/[name]/a.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','es2015', 'react']
}
}
},
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
noquotes: true
}
}
}
]
}
}
※上記はこの記述だけではない。「test: /.svg$/」あたりのオブジェクトが該当箇所です。
ポイントはオプションにnoquotes
をtrue
で渡すこと。
最初なにもつけずにやったらみたいにダブルクォーテーションがかぶった。
SVGの読み込みはとくに特別なことせず
import Logo from '../assets/svg/logo.svg';
こういう感じでimportすればOKです。
書きながら「React v15.0」からSVGの云々がサポートされるように云々というのを目にしてしまったけど、
Webpackの設定が悪かったのかコンパイル通らなかったから見なかったことにしよう。