title: Using react-native-vector-icons/FontAwesome with styled-components
body: <p>I'm refactoring some React Native code to use <a href="https://www.styled-components.com" rel="nofollow noreferrer">styled-components</a>, but having trouble styling FontAwesome icons. I get an error such as </p>
  
  <blockquote>
    <p>styledComponents2.default.IconFontAwesome is not a function</p>
  </blockquote>
  
  <p>so I understand per <a href="https://github.com/styled-components/styled-components/issues/1410" rel="nofollow noreferrer">this GitHub issue</a> that I need to wrap the component and pass the <code>className</code> prop down <a href="https://www.styled-components.com/docs/basics#styling-any-components" rel="nofollow noreferrer">per the docs on extending custom components</a>. So I have this:</p>
  
  <pre><code>import React from 'react';
  import {
    Text,
    TouchableOpacity,
  } from 'react-native';
  import PropTypes from 'prop-types';
  import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
  import styled from 'styled-components';
  
  const StyledTouchableOpacity = styled.TouchableOpacity`
    width: ${props =&gt; (props.large ? '100%' : '80%')};
    height: ${props =&gt; (props.large ? '80px' : '60px')};
    font-size: ${props =&gt; (props.large ? '18px' : '15px')};
    background: '#f1d746';
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  `;
  
  const StyledText = styled.Text`
    font-size: 15;
    font-weight: bold;
  `;
  
  const StylableIcon = ({ className }) =&gt; (
    &lt;IconFontAwesome className={className} /&gt;
  );
  
  const StyledIconFontAwesome = styled.StylableIcon`
    font-size: 15;
    padding: 10px;
  `;
  
  const Button = (props) =&gt; {
    let _icon = null;
  
    if (props.icon) {
      _icon = (
        &lt;StyledIconFontAwesome name={props.icon} /&gt;
      );
    }
  
    return (
      &lt;StyledTouchableOpacity&gt;
        &lt;StyledText&gt;{props.text}&lt;/StyledText&gt;
        {_icon}
      &lt;/StyledTouchableOpacity&gt;
    );
  };
  
  Button.defaultProps = {
    icon: null,
  };
  
  Button.propTypes = {
    icon: PropTypes.string,
  };
  
  export default Button;
  </code></pre>
  
  <p>which results in a similar error</p>
  
  <blockquote>
    <p>styledComponents2.default.StylableIcon is not a function</p>
  </blockquote>
  
  <p>Any tips on what I'm doing wrong here? Thanks all.</p>