Beanheads Vue
v1.0.0Create billions of unique characters by mixing and matching colors, hairstyles, and clothing.
Getting Started
Install Beanheads Vue with your preferred package manager.
npm install beanheads-vue
then, in your app:
<script setup>
import { Beanhead } from 'beanheads-vue'
</script>
<template>
<!-- With explicit width -->
<Beanhead width="100"/>
<!-- Without width - will fill parent container -->
<div style="width: 100px;">
<Beanhead/>
</div>
</template>
Props
All props are optional.
Name | Type | Default |
---|---|---|
mask | boolean | false |
skin | "light" "yellow" "brown" "dark" "red" "black" | "light" |
body | "chest" "breasts" | "chest" |
eye | "content-eyes" "dizzy-eyes" "happy-eyes" "heart-eyes" "left-twitch-eyes" "normal-eyes" "simple-eyes" "squint-eyes" "wink" | "normal-eyes" |
with-lashes | boolean | false |
eyebrows | "none" "normal" "serious" "left-lowered" "angry" "concerned" | "none" |
mouth | "grin" "lips" "sad" "serious" "open" "tongue" | "grin" |
lip-color | "red" "purple" "pink" "turqoise" "green" | "red" |
facial-hair | "none" "stubble" "medium-beard" | "none" |
hair | "none" "afro" "balding" "bob" "bun" "buzz" "long" "pixie" "short" | "none" |
hair-color | "blonde" "orange" "black" "white" "brown" "blue" "pink" | "white" |
clothing | "none" "naked" "dress" "dress-shirt" "shirt" "tank-top" "v-neck" | "none" |
clothing-color | "white" "blue" "black" "green" "red" | "white" |
clothing-graphic | "none" "vue" "nuxt" "redwood" "react" "gatsby" "graphql" | "none" |
hat | "none" "beanie" "turban" | "none" |
hat-color | "white" "blue" "black" "green" "red" | "white" |
accessory | "none" "round-glasses" "tiny-glasses" "shades" | "none" |
face-mask | boolean | false |
face-mask-color | "white" "blue" "black" "green" "red" | "white" |
License
This project is licensed under the MIT License.