title: dynamically load react-icons into component
body: <p>I am trying to dynamically load react-icons into a component. The code is looking like this:</p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  import PropTypes from 'prop-types';
  import * as MaterialDesign from 'react-icons/md';
  
  const styles = {
   default: {
    flexDirection: 'column',
    alignItems: 'center'
   },
   inline: {
    flexDirection: 'row'
   }
  };
  
  const StyledTabs = styled.button`
   display: flex;
   cursor: pointer;
   color: ${props =&gt; props.color};
  
   ${props =&gt; styles[props.type]}
  `;
  
  const Tabs = ({ icon, type, text, color }) =&gt; {
   return (
    &lt;StyledTabs icon={icon} type={type} text={text} color={color}&gt;
     &lt;span&gt;
      &lt;MaterialDesign.MdHome /&gt;
     &lt;/span&gt;
     &lt;span&gt;{text}&lt;/span&gt;
    &lt;/StyledTabs&gt;
   );
  };
  
  Tabs.propTypes = {
   /** Text of tab */
   text: PropTypes.string.isRequired,
   /** Text of tab */
   type: PropTypes.oneOf(['default', 'inline']),
   color: PropTypes.string,
   icon: PropTypes.string
  };
  
  Tabs.defaultProps = {
   type: 'default',
   color: '#000',
   icon: ''
  };
  
  /**
   * @component
  */
  export default Tabs;
  </code></pre>
  
  <p>So i want the name of the react-icon in the property icon and place the string in <code>&lt;MaterialDesign.MdHome /&gt;</code> MdHome will be the string given in the property icon e.g. <code>MaterialDesign.{icon}</code> any help with getting this done? </p>