無法將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中

回答

相關問題