avataaars

React component for Avataaars

React component for Avataaars, used by Avataaars Generator. Designed by Pablo Stanley and developed by Fang-Pen Lin

Features

• SVG based
• Light weight
• Scalable
• Easy to use
• Easy to integrate with custom editor
• Comes with official editor

Usage

First, you need to install the avataaars component package, here you run

yarn add avataaars

or

npm install avataaars --save

if you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, fro example

import * as React from 'react'
import Avatar from 'avataaars'

export default class MyComponent extends React.Component {
  render () {
    return 
      <div>
        Your avatar:
        <Avatar
          style={{width: '100px', height: '100px'}}
          avatarStyle='Circle'
          topType='LongHairMiaWallace'
          accessoriesType='Prescription02'
          hairColor='BrownDark'
          facialHairType='Blank'
          clotheType='Hoodie'
          clotheColor='PastelBlue'
          eyeType='Happy'
          eyebrowType='Default'
          mouthType='Smile'
          skinColor='Light'
        />
      </div>
  }
}

To explore avatar options and generate React code, please use Avataaars Generator

Collect options

TBD