Usecase Examples

The following example demonstrates the Icons in action.

Sizes

Preview













Code

import React from 'react';

import Icon from '@flexnative/icons';

export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <Icon name='star' color='secondary' />
        <Icon name='star' size={16} color='secondary' />
        <Icon name='star' size={18} color='secondary' />
        <Icon name='star' size={24} color='secondary' />
        <Icon name='star' size={32} color='secondary' />
        <Icon name='star' size={64} color='secondary' />
      </div>
    );
  }
}

Colors

Preview



































Code

import React from 'react';

import Icon from '@flexnative/icons';
import { ICON_SIZE } from '../../constants';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <Icon name='star' size={ICON_SIZE} color='default'/>
        <Icon name='star' size={ICON_SIZE} color='primary'/>
        <Icon name='star' size={ICON_SIZE} color='secondary'/>
        <Icon name='star' size={ICON_SIZE} color='info'/>
        <Icon name='star' size={ICON_SIZE} color='success'/>
        <Icon name='star' size={ICON_SIZE} color='warning'/>
        <Icon name='star' size={ICON_SIZE} color='error'/>
        <Icon name='star' size={ICON_SIZE} color='dark'/>
        <Icon name='star' size={ICON_SIZE} color='light'/>
        <Icon name='star' size={ICON_SIZE} color='red'/>
        <Icon name='star' size={ICON_SIZE} color='chartreuse'/>
        <Icon name='star' size={ICON_SIZE} color='red'/>
        <Icon name='star' size={ICON_SIZE} color='chartreuse'/>
        <Icon name='star' size={ICON_SIZE} color='#9400FF'/>
        <Icon name='star' size={ICON_SIZE} color='#FFC436'/>
        <Icon name='star' size={ICON_SIZE} color='rgb(0, 146, 255)'/>
        <Icon name='star' size={ICON_SIZE} color='rgb(26, 192, 198)'/>
      </div>
    );
  }
}

Styling with StyleSheet

Preview







Code

import React from 'react';
import { StyleSheet } from 'react-native';

import Icon from '@flexnative/icons';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <Icon name='star' style={styles.icon1} />
        <Icon name='star' style={styles.icon2} />
        <Icon name='star' style={styles.icon3} />
      </div>
    );
  }
}

const styles = StyleSheet.create({
  icon1: {
    width: 64,
    height: 64,
    fontSize: 64,
  },
  icon2: {
    width: 64,
    height: 64,
    fontSize: 64,
    color: 'rgb(0, 146, 255)'
  },
  icon3: {
    fontSize: 32,
    color: 'crimson',
    backgroundColor: '#FFC436',
    textAlignVertical: 'center',
    width: 68,
    height: 68,
    padding: 15,
    textAlign: 'center',
    borderRadius: 34,
    borderWidth: 3,
    borderColor: 'black',
    overflow: 'hidden'
  }
});

Using Text Component

Preview







Code

import React from 'react';
import { StyleSheet, Text } from 'react-native';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <Text style={[styles.icon1, styles.textIcon]}>{'\ue90e'}</Text>
        <Text style={[styles.icon2, styles.textIcon]}>{'\ue90d'}</Text>
        <Text style={[styles.icon3, styles.textIcon]}>{'\ue91e'}</Text>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  icon1: {
    fontSize: 64,
  },
  icon2: {
    fontSize: 64,
    color: 'rgb(0, 146, 255)'
  },
  icon3: {
    fontSize: 32,
    color: 'crimson',
    backgroundColor: '#FFC436',
    textAlignVertical: 'center',
    width: 68,
    height: 68,
    padding: 15,
    textAlign: 'center',
    borderRadius: 34,
    borderWidth: 3,
    borderColor: 'black',
    overflow: 'hidden'
  },
  textIcon: {
    userSelect: 'none',
    fontFamily: 'Icons',
  }
});

Playground

Live Editor

//Play with props to see live changes;

render(<Icon name='star' size={128} color='primary'/>);

Result

Loading...