UNPKG

react-native-fontawesome-pro

Version:

Easily use your FontAwesome Pro 5.1 icons in React-Native.

82 lines (70 loc) 1.79 kB
import React from "react"; import PropTypes from "prop-types"; import { View, TouchableOpacity } from "react-native" import { Svg, Path } from "react-native-svg"; import { findIconDefinition } from "@fortawesome/fontawesome-svg-core"; import { prefixTypes } from "./config"; const DEFAULT_ICON = "question-circle"; const Icon = ( { name, size, color, type, containerStyle, iconStyle, onPress, activeOpacity } ) => { const prefix = prefixTypes[type]; let icon = findIconDefinition( { prefix, iconName: name } ); if ( !icon ) { icon = findIconDefinition( { prefix, iconName: DEFAULT_ICON } ); } const iconData = icon.icon; const path = iconData[4]; const viewBox = [ 0, 0, iconData[0], iconData[1] ].join( " " ); const iconContent = ( <Svg height={size} version="1.1" viewBox={viewBox} width={size} x="0" y="0" style={iconStyle} > <Path d={path} fill={color} /> </Svg> ); if ( onPress || containerStyle ) { return ( <TouchableOpacity onPress={onPress} disabled={!onPress} style={containerStyle} activeOpacity={activeOpacity} > {iconContent} </TouchableOpacity> ); } return iconContent; }; Icon.propTypes = { name: PropTypes.string, size: PropTypes.number, color: PropTypes.string, onPress: PropTypes.func, type: PropTypes.oneOf( Object.keys( prefixTypes ) ), iconStyle: PropTypes.oneOfType( [ PropTypes.object, PropTypes.array ] ), containerStyle: PropTypes.oneOfType( [ PropTypes.object, PropTypes.array ] ), activeOpacity: PropTypes.number }; Icon.defaultProps = { name: "", size: 20, color: "black", type: "regular", activeOpacity: 0.2 }; export default Icon;