awesome-react-avataaars

This is an upgraded version of Avataars to react 16+ and reimplementation using the context API.

Additionally,

• bug fix for the skin overflow
• reduced package size to ~500kb
• removed lodash dependency

The package has been tested for rendering the Avatar and Piece component correctly.

Since this package is being used on my production app, I might maintain this.

Credits:

The core React component for Avataaars Generator developed by Fang-Pen Lin, based on the Sketch library Avataaars designed by Pablo Stanley.

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 package, here you run

yarn add awesome-react-avataaars

or

npm install awesome-react-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, for 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="Wink"
          eyebrowType="Default"
          mouthType="Smile"
          skinColor="Light"
        />
      </div>
    )
  }
}

To showcase individual pieces of the avatar you can use the Piece component, for example:

import * as React from 'react'
import { Piece } from 'avataaars'

export default class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <Piece pieceType="mouth" pieceSize="100" mouthType="Eating" />
        <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy" />
        <Piece
          pieceType="eyebrows"
          pieceSize="100"
          eyebrowType="RaisedExcited"
        />
        <Piece
          pieceType="accessories"
          pieceSize="100"
          accessoriesType="Round"
        />
        <Piece
          pieceType="top"
          pieceSize="100"
          topType="LongHairFro"
          hairColor="Red"
        />
        <Piece
          pieceType="facialHair"
          pieceSize="100"
          facialHairType="BeardMajestic"
        />
        <Piece
          pieceType="clothe"
          pieceSize="100"
          clotheType="Hoodie"
          clotheColor="Red"
        />
        <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
        <Piece pieceType="skin" pieceSize="100" skinColor="Brown" />
      </div>
    )
  }
}

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

Collect options

To build your own avatar editor, you may want to use lower level Avatar component along with OptionContext. For more details usage, please reference to source code of avataaars-generator, see how it uses OptionContext to collection available options.