替換圖像元素與聯SVG在陣營

Question

我試圖創建的圖像元素變爲一個內聯SVG元素一個作出反應的組成部分。我想這樣做，所以我可以從文件中插入svg元素以處理與CSS的樣式。

同樣重要的是，我用我的項目的創建 - 反應 - 應用程序庫，並會喜歡能夠做到這一點沒有彈出我的項目。

變量req返回一個有效的svg元素，我設置this.state.response，然後我嘗試更新，但是，它不起作用。使用下面的代碼，我得到以下錯誤：

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 

代碼：

class Svg extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     response: undefined 
    }; 
    this.toSvg(this.props.src); 
} 

toSvg(img) { 
    const imageUrl = img; 
    let self = this; 

    // Create new XML Http Request to get data 
    let request = new XMLHttpRequest(); 
    request.open('GET', imageUrl, true); 

    request.onreadystatechange = function() { 
     if (this.readyState === 4) { 
      if ((this.status >= 200) && (this.status < 400)) { 
       // Success! 
       // Returns the HTML object 
       let req = request.responseXML.getElementsByTagName('svg')[0]; 

       self.setState({ 
        response : req 
       }); 
      } else { 
       // Error :(
      } 
     } 
    }; 

    request.send(null); 
} 

render() { 
    if (this.state.response === undefined) { 
     console.log('no response rendering standard img'); 
     return <img src={this.props.src} alt='icon' />; 
    } 
    else { 
     console.log('now we update'); 
     return this.state.response; 
    } 
} 
} 

如果有人知道如何處理SVG元素替換img元素沒有錯誤，這將是真棒。

Answer 1

使用svg-inline-loader

# add npm package 
npm install svg-inline-loader --save-dev 

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

# using in react code 
<InlineSVG src={require("file.svg")} /> 

編輯：

目前在create-react-app的url-loader使用。

所以，你可以手動配置文件大小限制以檢索數據URL：

require("url-loader?limit=10000!./file.svg"); 

Answer 2

結束了使用react-svg。

https://www.npmjs.com/package/react-svg

就像一個魅力。