Skip to content

This project is a demo for the library vue-avataaar

Notifications You must be signed in to change notification settings

y99chat/vue-avataaar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 

Repository files navigation

vue-avataaar demo

## Introduction

This is a demo for vue-avataaar component by jtouzy Cartoon Avatar Maker Demo

Installation

Quick install with NPM:

npm install vue-avataaar --save

Usage

Simply import and use the avataaar component in your vue template:

<template>
  <div>
    <avataaar avatar-style="Circle"></avataaar>
  </div>
</template>

<script>
import Avataaar from 'vue-avataaar'

export default {
  components: {
    Avataaar
  }
}
</script>

You can provide all the available avataaars-options as component properties to customize your avatar (like avatar-style in the example below).

Properties

avatarStyle

  • Circle
  • Transparent

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

You can find all the available properties with the avataaars-generator provided by Fang-Pen Lin.

About

This project is a demo for the library vue-avataaar

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published