Icon Type

Avatar with icons.

Usecase Examples

The following example demonstrates the Avatar of type icon in action.

Color

Preview



























Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-10 20:46:49
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:32:52
 * @ Description: Examples of Avatar component of type `icon` with different colors.
 */

import React from 'react';
import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' color='primary'/>
        <Avatar icon='avatar' type='icon' color='secondary'/>
        <Avatar icon='avatar' type='icon' color='success'/>
        <Avatar icon='avatar' type='icon' color='info'/>
        <Avatar icon='avatar' type='icon' color='warning' />
        <Avatar icon='avatar' type='icon' color='error'/>
        <Avatar icon='avatar' type='icon' color='default'/>
        <Avatar icon='avatar' type='icon' color='dark'/>
        <Avatar icon='avatar' type='icon' color='light'/>

        <Avatar icon='avatar' type='icon' color='crimson'/>
        <Avatar icon='avatar' type='icon' color='#ed143d'/>
        <Avatar icon='avatar' type='icon' color='rgb(237, 20, 61)'/>
        <Avatar icon='avatar' type='icon' color='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BackgroundColor

Preview









Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-10 20:53:54
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:31:42
 * @ Description: Examples of Avatar component of type `icon` with Background color.
 */

import React from 'react';
import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' backgroundColor='crimson'/>
        <Avatar icon='avatar' type='icon' backgroundColor='#ed143d'/>
        <Avatar icon='avatar' type='icon' backgroundColor='rgb(237, 20, 61)'/>
        <Avatar icon='avatar' type='icon' backgroundColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BorderColor

Preview









Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-10 20:57:43
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:32:07
 * @ Description: Examples of Avatar component of type `icon` with border color.
 */

import React from 'react';
import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' borderWidth='thin' borderColor='crimson'/>
        <Avatar icon='avatar' type='icon' borderWidth='thin' borderColor='#ed143d'/>
        <Avatar icon='avatar' type='icon' borderWidth='thin' borderColor='rgb(237, 20, 61)'/>
        <Avatar icon='avatar' type='icon' borderWidth='thin' borderColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BorderWidth

Preview













Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-10 21:06:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:32:32
 * @ Description: Examples of Avatar component of type `icon` with Border width.
 */

import React from 'react';
import Avatar from '@flexnative/avatar';

export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' fillMode='none' borderWidth='none'/>
        <Avatar icon='avatar' type='icon' fillMode='none' borderWidth='hairline'/>
        <Avatar icon='avatar' type='icon' fillMode='none' borderWidth='thin'/>
        <Avatar icon='avatar' type='icon' fillMode='none' borderWidth='base'/>
        <Avatar icon='avatar' type='icon' fillMode='none' borderWidth='thick'/>
        <Avatar icon='avatar' type='icon' fillMode='none' borderWidth={2}/>
      </div>
    );
  }
}

FillMode

Preview







Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' color='primary' fillMode='solid' />
        <Avatar icon='avatar' type='icon' color='primary' fillMode='none' />
        <Avatar icon='avatar' type='icon' color='primary' fillMode='ghost' />
      </div>
    );
  }
}

Radius

Preview













Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' radius='none' />
        <Avatar icon='avatar' type='icon' radius='small' />
        <Avatar icon='avatar' type='icon' radius='medium' />
        <Avatar icon='avatar' type='icon' radius='large' />
        <Avatar icon='avatar' type='icon' radius='full' />
        <Avatar icon='avatar' type='icon' radius={15} />
      </div>
    );
  }
}

Size

Preview









Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block align-center'>
        <Avatar icon='avatar' type='icon' size='small' />
        <Avatar icon='avatar' type='icon' size='medium' />
        <Avatar icon='avatar' type='icon' size='large' />
        <Avatar icon='avatar' type='icon' size={120} />
      </div>
    );
  }
}

IconColor

Preview









Code

import React from 'react';

import Avatar from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar icon='avatar' type='icon' iconColor='crimson'/>
        <Avatar icon='avatar' type='icon' iconColor='#ed143d'/>
        <Avatar icon='avatar' type='icon' iconColor='rgb(237, 20, 61)'/>
        <Avatar icon='avatar' type='icon' iconColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(<Avatar icon='avatar' type='icon' size={120} color='default' borderWidth='thin' fillMode='ghost' backgroundColor='#ed143d24' borderColor='crimson' />);

Result

Loading...