Q: Unable to import SVG file into React I'm using React v15.4.1. I've followed this solution but in the place of where the component should be rendered, I am only getting a string like this https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg
My React component is set up like:
import theSVGicon from 'path/to/icon.svg';
...
<span dangerouslySetInnerHTML={{ __html: theSVGicon }} />

Other Notes:


*

*The image renders fine when I include it as the src in an image like this: <img src={theSVGicon}/>

*Code like the bottom of this page does work: 
<svg viewBox="0 0 64 64" width="64" height="64" fill="currentcolor">
<path d="M 28.495430026136273 0 L 35.504569973863724 0 L 37.22908963117581 ... 0 0 0 32 20"></path>
</svg>

*Following this solution, I do see an svg component rendered, along with the other attributes. I also see the spacing for where it should be, but it is blank. More details:



image link: http://imgur.com/a/6GxDD


*Ideally, I want to set up my svg image like in (3) above so that I can tweak attributes like viewBox and height, which is supported in the latest React version.


Is something wrong with my loader? I am using Webpack and rendering server side using webpack-isomorphic-tools. I didn't want to look too much into this since it does work with an img and I have code that is supposed to handle SVGs based off of an earlier version of a boilerplate:
dev.config.js
...
module: {
    loaders: [
      ...
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },
...

webpack-isomorphic-tools.js
...
assets: {
    ...
    svg: {
      extension: 'svg',
      parser: WebpackIsomorphicToolsPlugin.url_loader_parser
    },
...

My last-ditch effort would be to redo and follow this

A: Use svg-inline-react as an loader and to load svg as inline
{ test: /\.svg$/, loader: 'svg-inline' }

with specify the svg-inline loader it should work with your below line
<span dangerouslySetInnerHTML={{ __html: UpvoteFist }} />

but if only loader doesn't work for you then follow the guidlines they given as
import InlineSVG from 'svg-inline-react'; // ES2015

.......
 <InlineSVG src={require("svg-inline!icon.svg")} /> // Use with loader

