6 thoughts on “using FontAwesome

  1. According to the IconNB implementation:

    <Icon theme={{ iconFamily: 'FontAwesome' }} name='fontawesome-name' />

  2. Seems like theme prop is no longer supported. I made a custom Icon class for using other icon families:

    import React, { Component } from 'react'
    import { StyleProvider, getTheme, Icon } from 'native-base'
    
    type Props = {
      family?: string,
      name: string,
      style?: any
    }
    
    export default class MIcon extends Component<Props> {
      render () {
        const { family, name, style } = this.props
        const icon = <Icon name={name} style={style} />
        if (family) {
          const customTheme = getTheme({iconFamily: family})
          return <StyleProvider style={customTheme}>{icon}</StyleProvider>
        } else {
          return icon
        }
      }
    }

    Example:

    <Icon
      family='FontAwesome'
      name='pause-circle-o'
      style={{ fontSize: 20, color: 'red' }]}
    />
  3. For js version:

    import React, { Component } from 'react';
    import { ViewPropTypes } from 'react-native';
    import { StyleProvider, getTheme, Icon } from 'native-base';
    import PropTypes from 'prop-types';
    
    export default class IHIcon extends Component {
      render () {
        const { family, name, style } = this.props;
        const icon = <Icon name={name} style={style} />
        if (family) {
          const customTheme = getTheme({iconFamily: family})
          return <StyleProvider style={customTheme}>{icon}</StyleProvider>
        } else {
          return icon
        }
      }
    }
    
    IHIcon.propTypes = {
      family: PropTypes.string,
      name: PropTypes.string.isRequired,
      style: PropTypes.any
    };
  4. My NativeBase
    "native-base": "^2.3.9",
    I see in node_modules/native-base/src/basic/IconNB.js

    IconNB.propTypes = {
    	style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
    	type: PropTypes.oneOf(["Ionicons", "Entypo", "FontAwesome", "Foundation", "MaterialIcons", "MaterialCommunityIcons", "Octicons", "Zocial", "SimpleLineIcons"]),
    };
    

    and i usage <Icon type="FontAwesome" name="calendar-plus-o" /> and this work for me

    Thanks NativeBase!

  5. Pingback: fake rolex

Comments are closed.