title: Load svg dinamically as a react component
body: <p>My app should render about 30000 svg elements, depending on routes.
  If route is like www.myapp.com/svg-data/person it should render person.svg.</p>
  
  <p>Later on (same route), this svg could be modified: add background color, some text, or some predefined layers.
  I guess I should load the svg as a react component. I'm having a look at library <a href="https://github.com/boopathi/react-svg-loader" rel="nofollow noreferrer">https://github.com/boopathi/react-svg-loader</a> but I don't think it really fit my purpose.</p>
  
  <p>My last thought is about fetching svg data as string and render it inside a component which returns an svg among other things...</p>
  
  <p>I should build a generic component, that renders whatever svg that comes as a parameter:</p>
  
  <pre><code>  componentDidMount() {
      if (this.props.params.searchText) {
        this.props.requestSVG(this.props.params.searchText)
      }
    }
  
    componentWillReceiveProps(nextProps) {
      if (this.props.params.searchText !== nextProps.params.searchText) {
        this.props.requestSVG(nextProps.params.searchText)
      }
    }
  </code></pre>
  
  <p>This component would render something like:</p>
  
  <pre><code>render() {
     const {svgData, textForSVGData} = this.props
     let svgText=null
  
     if (textForSVGData) {
       svgText= &lt;text x='250' y='150' font-size='55'&gt; {textForSVGData} &lt;/text&gt;
     }
  
     return (
        &lt;svg&gt;
          {this.props.svgData}
          {svgText}
        &lt;/svg&gt;
     )
  
  }
  </code></pre>
  
  <p>Depending on props it should add text, or any other things on demand. Do I miss something? This is the good way to do it? </p>