@gamepark/avataaars
v2.3.0
Published
React component for avataaars
Downloads
32
Readme
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
export default function MyComponent () {
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 showcase individual pieces of the avatar you can use the Piece component, for example:
export default function MyComponent () {
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.