替换图像元素与联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

就像一个魅力。