About

Did you ever want to create a Big Head version of your self? Or do you want to offer users an easy creation of avatars for your application? Here you go! 🚀
This projects extends the Original Big Heads implementation with features of the React Native Big Heads implementation and the Vue Big Heads implementation, giving it a rich set of options to style your Big Head Avatar.

Try it

Getting Started

1. npm i extended-bigheads

2. 1import { BigHead } from "extended-bigheads";
   2// or
   3const { BigHead } = require("extended-bigheads");

then, in your app:

1import { BigHead } from "extended-bigheads";
2// or const { BigHead } = require("extended-bigheads");
3
4const Example = () => (
5  <BigHead
6    showBackground={true}
7    backgroundColor="blue"
8    backgroundShape="square"
9    accessory="shades"
10    body="chest"
11    clothing="tankTop"
12    clothingColor="red"
13    eyebrows="angry"
14    eyes="wink"
15    facialHair="mediumBeard"
16    facialHairColor="blonde"
17    graphic="vue"
18    hair="short"
19    hairColor="black"
20    hat="none"
21    hatColor="green"
22    lashes={false}
23    lipColor="purple"
24    mouth="open"
25    skinTone="brown"
26    faceMask={true}
27    faceMaskColor="blue"
28  />
29);

To retrieve an object with all options possible, use

1import { bigHeadOptions } from "extended-bigheads";
2// or
3const { bigHeadOptions } = require("extended-bigheads");

bigHeadOptions will look like this:

1{
2  accessory: ['none', 'roundGlasses', 'tinyGlasses', ...],
3  backgroundColor: ['red', 'orange', 'yellow', ...],
4  backgroundShape: ['circle', 'square', 'squircle'],
5  ...
6}

Props

Leaving a prop empty will result in a random value being chosen.

Property	Possible values
showBackground	true , false
backgroundColor	'red' , 'orange' , 'yellow' , 'green' , 'turqoise' , 'blue' , 'pink' , 'purple'
backgroundShape	'none' , 'circle' , 'square' , 'squircle'
accessory	'none' , 'faceMask' , 'hoopEarrings' , 'roundGlasses' , 'shades' , 'tinyGlasses'
body	'chest' , 'breasts'
clothing	'naked' , 'chequeredShirt' , 'chequeredShirtDark' , 'shirt' , 'denimJacket' , 'dressShirt' , 'hoodie' , 'vneck' , 'tankTop' , 'dress'
clothingColor	'white' , 'gray' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'yellow' , 'lightYellow' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple'
eyebrows	'none' , 'angry' , 'concerned' , 'leftLowered' , 'raised' , 'serious'
eyes	'normal' , 'content' , 'crazy' , 'cute' , 'cyborg' , 'dizzy' , 'dollars' , 'eyePatch' , 'eyePatch2' , 'happy' , 'hearts' , 'leftTwitch' , 'squint' , 'simple' , 'stars' , 'wink'
facialHair	'none' , 'goatee' , 'mediumBeard' , 'stubble'
facialHairColor	'white' , 'silver' , 'blonde' , 'brown' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple'
graphic	'none' , 'donut' , 'gatsby' , 'graphQL' , 'rainbow' , 'react' , 'redwood' , 'vue'
hair	'none' , 'afro' , 'balding' , 'bob' , 'bun' , 'buzz' , 'long' , 'mohawk' , 'pixie' , 'short'
hairColor	'white' , 'silver' , 'blonde' , 'brown' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple'
hat	'none ', 'beanie' , 'hijab' , 'partyHat' , 'turban'
hatColor	'white' , 'gray' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'yellow' , 'lightYellow' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple'
lashes	true , false
lipColor	'red' , 'lightRed' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lightPurple'
mouth	'grin' , 'lips' , 'open' , 'openSmile' , 'piercedTongue' , 'sad' , 'serious' , 'tongue' , 'vomitingRainbow'
skinTone	'light' , 'yellow' , 'brown' , 'dark' , 'red' , 'black'
faceMask	true , false
faceMaskColor	'white' , 'gray' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'yellow' , 'lightYellow' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple'

---

Authors

• Some portions of this code belong to the bigheads authors which are distributed under the MIT License
• Some portions of this code belong to the react-native-bigheads authors which are distributed under the MIT License
• Some portions of this code belong to the vue-bigheads authors which are distributed under the MIT License
• Robert Linde

License

This project is licensed under the MIT License - see the LICENSE file for details