title: React SVG, issue with combining SVG's
body: <p>If I want to combine multiple SVG parts into a single component, the issue is that every React component has to return a single parent element.</p>
  
  <pre><code>class ComponentA extends Component {
    render() {
      return (
  
        &lt;svg&gt;
          &lt;Part1 /&gt;
          &lt;Part2 /&gt;
  
        &lt;/svg&gt;
      )
    }
  }
  
  
  class Part1 extends Component {
    render() {
      return (
        &lt;defs&gt;
          &lt;linearGradient...&gt;
          &lt;etc...&gt;
        &lt;/defs&gt;
        &lt;g&gt;
          &lt;path...&gt;
          &lt;text...&gt;
        &lt;/g&gt;
  )
    }
  }
  
  
  class Part2 extends Component {
    render() {
      return (
        &lt;defs&gt;
          &lt;linearGradient...&gt;
          &lt;etc...&gt;
        &lt;/defs&gt;
        &lt;g&gt;
          &lt;circle...&gt;
          &lt;path...&gt;
          &lt;path...&gt;
        &lt;/g&gt;
  )
    }
  }
  </code></pre>
  
  <p>As we can see, in order to combine multiple SVG components into one component, we have to return both <strong>defs</strong> and <strong>g</strong> tags, and possibly also <em>title</em> and maybe others. This breaks the React rule that every component needs to return only one parent element. How do we solve this? </p>