title: React native vector icons - dynamic type
body: <p>I'm using different types of react native vector icons - Material and FontAwesome depending on availability of a particular icon. I wanted to create a common component that wraps usage of the icons across the app. So far I have: </p>
  
  <pre><code>import React from 'react';
  import Icon from "react-native-vector-icons/FontAwesome";
  import {theme} from "../../../styles/style";
  
  /**
   * Common reusable icon component
   * @param props
   * @returns {*}
   */
  const icon = (props) =&gt; {
      return (
          &lt;Icon
              size={theme.SIZE_ICON}
              color={theme.BACKGROUND_ICON_COLOR}
              {...props}
              style={props.style}/&gt;
      );
  };
  
  export default icon;
  </code></pre>
  
  <p>Which works only for FontAwesome, how can I make it dynamic based on e.g. prop parameter so I can use Material icons when I need to? Note: I wouldn't like to create separate components for each type e.g. IconMaterial, IconFontAwesome etc. I want the name of the component to be Icon regardless of type. Is that possible?</p>