title: Style properties on react components
body: <p>I have a component that is being repeated and the only reason its being repeated is because of the icon, color, and text. </p>
  
  <pre><code>import React from 'react';
  const TabOne = () =&gt;{
  return (
      &lt;div  className="irequest-tabs users"&gt;
          &lt;span className="tabOne"&gt;&lt;i className="fa fa-sitemap navbuttonIcon"  aria-hidden="true"&gt;&lt;/i&gt;
              &lt;span className="hidden-sm hidden-xs"&gt;I want to...&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  );
  }
  export default TabOne
  </code></pre>
  
  <p>I wanted to see if there was a way to make those properties on the component so that my component when used would look like:</p>
  
  <pre><code>&lt;Tab1 color="#fff" icon="fa fa-sitemap" text="I want too..." /&gt;
  </code></pre>
  
  <p>I've tried: </p>
  
  <pre><code>import React from 'react';
  const TabOne = () =&gt;{
  return (
      &lt;div style={{color: props.color}} className="irequest-tabs users"&gt;
          &lt;span className="tabOne"&gt;&lt;i className={props.icon}  className="navbuttonIcon" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;span className="hidden-sm hidden-xs"&gt;{props.text}&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  );
  }
  export default TabOne
  </code></pre>