ReactでSVGを読み込んでdata:で埋め込む

いくつかローダーあったけど、これが素直でした。

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の設定が悪かったのかコンパイル通らなかったから見なかったことにしよう。