sample.jsx

import React from "react";
import svg from "./sample.svg";

export default class Sample extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
        <span className="logo" dangerouslySetInnerHTML={{__hrml: svg}} />
      </div>
    )
  }
}

webpack.config.js

module.exports = {
  entry: entries,
  output: {
      path: dst,
      filename: '[name].bundle.js'
  },
  resolve: {
      root: [path.resolve('./vlsn/js')],
      extensions: ['', '.js', '.jsx', '.es6']
  },
  plugins: [],
  module: {
    loaders: [
        {
          test: /\.(js|jsx|es6)$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ["transform-class-properties"]
          }
        },
        {
          test: /\.css?$/,
          loaders: ['style-loader', 'css-loader?modules&localIdentName=[path][name]__[local]--[hash:base64:5]']
        },
        {
          test: /\.svg$/,
          loader: 'svg-inline-loader?classPrefix'
        }
    ]
  }
};

svgファイルをReactコンポーネント化してもいいのですが、面倒くさい場合とかに有効そう。
imgタグで読み込んでもいいけど、jsに入れ込みたい需要はどこかでありそう。
肝はwebpackのloaderでsvg-inline-loaderを呼んでいるところ。
これでcss-modulesみたいにsvgをimportすることができるようになる

でも、このやりかただとstorybookでは正しく表示されなかった。
innderHTMLだからかな・・・