title: React: Pass component as prop without using this.props.children
body: <p>I have this a component <code>Foo.js</code>:</p>
  
  <pre><code>// a svg component with a star.svg icon
  import { IconStar } from 'react-svg-icons'; 
  
  // call a button with a custom icon
  &lt;Button icon={ IconStar }&gt; Click to trigger &lt;/Button&gt;
  </code></pre>
  
  <p>And then on <code>button.js</code> I have:</p>
  
  <pre><code>render() {
    const theIcon = this.props.icon;
    return (
      &lt;button&gt;
        {this.props children}
        {icon() /*this works but i can't pass props inside it*/} 
        &lt;theIcon className={ Styles.buttonIcon } /&gt;
      &lt;/button&gt;
    )
  }
  </code></pre>
  
  <p>I want to render <code>&lt;IconStar&gt;</code> inside <code>&lt;Button&gt;</code>, how do I do that?.</p>
  
  <p>I can't pass this as <code>this.prop.children</code> because it has more logic around the icon prop, but in this case I'm showing only a demo.</p>
  
  <p>Thanks</p>