无法将SVG文件导入React

Question

我使用的是React v15.4.1。我已经关注了this solution但是在应该呈现组件的位置，我只得到一个这样的字符串https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg

我的React组件设置如下：

import theSVGicon from 'path/to/icon.svg';
...
<span dangerouslySetInnerHTML={{ __html: theSVGicon }} />

其他说明：

1. 当我将src作为image包含在<img src={theSVGicon}/>中时，图片呈现正常：<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>
2. this页面底部的代码确实有效： svg
3. 在this解决方案之后，我确实看到了viewBox组件以及其他属性。我也看到它应该在哪里的间距，但它是空白的。更多细节：

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

1. 理想情况下，我想在上面的（3）中设置我的svg图像，以便我可以调整最新的React版本支持的height和img等属性。

我的装载机有问题吗？我使用webpack-isomorphic-tools使用Webpack和渲染服务器端。我不想过多考虑这一点，因为它与... 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' } ] }, ... 一起工作，并且我的代码应该基于早期版本的boilerplate来处理SVG：

dev.config.js

...
assets: {
    ...
    svg: {
      extension: 'svg',
      parser: WebpackIsomorphicToolsPlugin.url_loader_parser
    },
...

的WebPack-同构-tools.js

scanf("%lf",&x);

我的最后努力是重做并遵循this

Answer 1

使用svg-inline-react作为加载程序并将svg加载为内联

{ test: /\.svg$/, loader: 'svg-inline' }

指定svg-inline加载程序，它应该与你的下一行一起使用

<span dangerouslySetInnerHTML={{ __html: UpvoteFist }} />

但如果只有装载机不适合你，那么请按照他们给出的指导原则

import InlineSVG from 'svg-inline-react'; // ES2015

.......

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