无法将SVG文件导入到React中

我正在使用React v15.4.1。我已经按照this solution但在该组件应呈现的地方，我只得到这样的https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg无法将SVG文件导入到React中

字符串我的阵营组件设置如下：

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

其他注意事项：

图像呈现细当我包括它作为在image像这样src：<img src={theSVGicon}/>
类似的代码this页面底部做工作： <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>
继this的解决方案，我看到一个svg组件渲染，与其他的属性。我也看到它应该在哪里的间隔，但它是空白的。更多细节：

from element inspector image link: http://imgur.com/a/6GxDD

理想情况下，我想设置我的SVG图像像在（3）的上方，使得我可以调整属性等viewBox和height，它在最新的React版本中受支持。

我的装载机有问题吗？我正在使用Webpack和渲染服务器端使用webpack-isomorphic-tools。我不想看太多这个，因为它不具有img工作，我有一个应该处理基于关闭的早期版本的boilerplate的SVGs代码：

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同构，tools.js

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

我最后的努力将重做，并按照this

来源

2017-02-17 writofmandamus

使用svg-inline-react作为装载机和加载SVG内联

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

与指定SVG内联装载机它应该与以下行

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

工作，但如果只装载不为你工作，然后按照他们给出的指导

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

.......

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

来源

2017-02-17 06:29:18

把'src'放在'img'中对我有效，但我想把它渲染为svg-inline。 – writofmandamus

@writofmandamus检查更新的答案，如果这对你有用。 –

是的，svg内联装载程序不适用于我。然后它会抛出一个关于无法通过我的一个节点模块中的字体真棒svg文件解析的错误。你的第二个建议不起作用，或者很多'svg-inline-loader不存在'不存在错误。如果你有一个，我想知道你的webpack-isomorphic-tools.js文件是怎么样的？我认为这份指南是我最接近它的工作机会：https：//github.com/peter-mouland/react-lego/wiki/Importing-SVGs。我需要弄清楚的一个主要问题是为什么我的'svg'不包含在图像中：extensions [... – writofmandamus

无法将SVG文件导入到React中

回答

相关问题