Skip to content

ghinwallc/avataaars

 
 

Repository files navigation

React component for Avataaars

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 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, 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='Happy'
          eyebrowType='Default'
          mouthType='Smile'
          skinColor='Light'
        />
      </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.

About

React component for avataaars

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%