Cannot load SVG as React Component

I cannot make any of svg loaders work with webpack-isomorphic-tools. I tried a lot of different loaders like react-svg-loader, svg-react-loader and configurations from { test: /\.svg$/, loader: 'svg-react' } to { test: /\.svg$/, loader: 'file!babel!svg-react…' } with no luck.

webpack-isomorphic-tools mostly throws an error:

[webpack-isomorphic-tools] [error] asset not found: ./src/app/theme/svg-icons/bullet.svg

or

./src/app/theme/svg-icons/bullet.svg
[0] Module build failed: Error: Non-whitespace before first tag.

I tried to parse url in webpack-isomorphic-tools with WebpackIsomorphicToolsPlugin.url_loader_parser same errors occures.

Is there a workaround how can I use webpack-isomorphic-tools to get this work?

import SVGicon from '../../theme/svg-icons/bullet.svg';

export const TextWithIcon = ({text}) => <div><SVGIcon />{text}</div>

svg-inline-loader is deprecated, svg-inline-react wans about using require in expression.

Please help!

[yundifu]

For anyone has this issue, you could use inline-react-svg babel plugin.

[seleckis]

Oh my gosh. Project is based on https://github.com/erikras/react-redux-universal-hot-example, there is a huge amount of configs and dependences, so I doubt it would be easy to do that. 😦