title: How can I pass an SVG and some markup as a React prop?
body: <p>I have a React button component that accepts a <code>text</code> prop, which is used to set the text of the button.</p>
  
  <p><code>&lt;Button text="My Button Text" /&gt;</code></p>
  
  <p>This works well, but I want to set the text as an SVG with some markup. If I pass just the SVG, that works.</p>
  
  <pre><code>import { ReactComponent as IconSearch } from '../../icons/search.svg';
  
  &lt;Button text={&lt;IconSearch /&gt;} /&gt;
  </code></pre>
  
  <p>Once, I add the markup though, it stops working.</p>
  
  <pre><code>import { ReactComponent as IconSearch } from '../../icons/search.svg';
  
  &lt;Button text={`${&lt;IconSearch /&gt;} &lt;span&gt;Search&lt;/span&gt;`} /&gt;
  </code></pre>
  
  <p>How can I pass an SVG and some markup as the prop?</p>