Skip to main content

Icon

Simple component which renders icon and can be pressed.

Usage

import * as React from 'react';
import { App, Screen, Icon, StyleSheet } from '@flexn/create';

const MyComponent = () => {
return (
<App>
<Screen style={styles.container}>
<Icon iconFont="fontAwesome" name="rocket" size={40} color="#0A74E6" />
</Screen>
</App>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
});

export default MyComponent;

Props

iconFont

Required

Type: string

Font of the icon which depends on what icon fonts are included, but can be one of the following:

  • fontAwesome
  • feather
  • antDesign
  • entypo
  • evilIcons
  • foundation
  • ionicons
  • materialIcons
  • octicons
  • simpleLineIcons
  • zocial

iconName

Required

Type: string

Name of the icon of selected fonts. Available icon names can be found at https://oblador.github.io/react-native-vector-icons/


iconColor

Required

Type: string

Size of the icon. If it's not defined then it will use width or height of the icon as width.


size

Required

Type: string

Color of the icon


onPress

Type: () => void

Event fired when icon is pressed.


style

Type: StyleProp< TextStyle >

Styles of the Icon.


testID

Type: string

Used to locate this view in end-to-end tests.