vuejs-avatar-generator
v3.1.2
Published
vuejs-avataaars fork with some changes and fixes
Downloads
5
Readme
vuejs-avatar-generator
Simple avatar generator Vue component for avataaars.
[Demo] http://vuejs-avataaars.surge.sh/
avataaars designed by Pablo Stanley.
Features:
- SVG images - scale without loss of quality.
- Customisable Props.
- Random props.
Installation
Quick install with NPM:
npm install vuejs-avatar-generator
Quick install with Yarn:
yarn add vuejs-avatar-generator
Usage
in your Vue component
<template>
<div>
<!--- all random :) ---->
<avataaars></avataaars>
<!--- with some props ---->
<avataaars
:clotheType="'GraphicShirt'"
:eyebrowType="'Angry'"
:eyeType="'Cry'"
:mouthType="'Eating'"
:facialHairColor="'Blonde'"
:graphicType="'Cumbia'">
</avataaars>
</div>
</template>
<script>
import Avataaars from 'vuejs-avataaars'
export default {
components: {
Avataaars
}
}
</script>
Props
The following props can be passed to the component:
The default state is for all props is random :)
isCircle
- true (default)
- false
circleColor
- color hex (default: #6fb8e0)
accessoriesType
- Blank
- Kurt
- Prescription01
- Prescription02
- Round
- Sunglasses
- Wayfarers
clotheType
- BlazerShirt
- BlazerSweater
- CollarSweater
- GraphicShirt
- Hoodie
- Overall
- ShirtCrewNeck
- ShirtScoopNeck
- ShirtVNeck
clotheColor
- Black
- Blue01
- Blue02
- Blue03
- Gray01
- Gray02
- Heather
- PastelBlue
- PastelGreen
- PastelOrange
- PastelRed
- PastelYellow
- Pink
- Red
- White
eyebrowType
- Angry
- AngryNatural
- Default
- DefaultNatural
- FlatNatural
- RaisedExcited
- RaisedExcitedNatural
- SadConcerned
- SadConcernedNatural
- UnibrowNatural
- UpDown
- UpDownNatural
eyeType
- Close
- Cry
- Default
- Dizzy
- EyeRoll
- Happy
- Hearts
- Side
- Squint
- Surprised
- Wink
- WinkWacky
facialHairColor
- Auburn
- Black
- Blonde
- BlondeGolden
- Brown
- BrownDark
- PastelPink
- Platinum
- Red
- SilverGray
facialHairType
- Blank
- BeardMedium
- BeardLight
- BeardMagestic
- MoustacheFancy
- MoustacheMagnum
graphicType
- Bat
- Cumbia
- Deer
- Diamond
- Hola
- Pizza
- Resist
- Selena
- Bear
- SkullOutline
- Skull
hairColor
- Auburn
- Black
- Blonde
- BlondeGolden
- Brown
- BrownDark
- PastelPink
- Platinum
- Red
- SilverGray
mouthType
- Concerned
- Default
- Disbelief
- Eating
- Grimace
- Sad
- ScreamOpen
- Serious
- Smile
- Tongue
- Twinkle
- Vomit
skinColor
- Tanned
- Yellow
- Pale
- Light
- Brown
- DarkBrown
- Black
topType
- NoHair
- Eyepatch
- Hat
- Hijab
- Turban
- WinterHat1
- WinterHat2
- WinterHat3
- WinterHat4
- LongHairBigHair
- LongHairBob
- LongHairBun
- LongHairCurly
- LongHairCurvy
- LongHairDreads
- LongHairFrida
- LongHairFro
- LongHairFroBand
- LongHairNotTooLong
- LongHairShavedSides
- LongHairMiaWallace
- LongHairStraight
- LongHairStraight2
- LongHairStraightStrand
- ShortHairDreads01
- ShortHairDreads02
- ShortHairFrizzle
- ShortHairShaggyMullet
- ShortHairShortCurly
- ShortHairShortFlat
- ShortHairShortRound
- ShortHairShortWaved
- ShortHairSides
- ShortHairTheCaesar
- ShortHairTheCaesarSidePart