0.0.6 • Published 5 years ago

vue-random-avatar v0.0.6

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

vue-random-avatar

Generate random avatars based on username

Install

  • yarn install: yarn add vue-random-avatar
  • npm install: npm install vue-random-avatar --save

How to use

Import and register it in your component

<template>
  <div>
    <avatar
      :seed="this.username"
      :colors="['#e9d758', '#297373', '#ff8552', '#e6e6e6', '#39393a']"
      :epsilon="0.1"
      :max-divisions="3"
    />
  </div>
</template>

<script>
import avatar from 'vue-random-avatar'

export default {
  components: { avatar },
  data() {
    return {
      username: "Byteslicer"
    }
  }
}
</script>

Props

Play around with epsilon and max-mivisions props to find something that you like

NameDescriptionType
seedString used for seeding the random generatorString
colorsArray of valid CSS colors or Object with { saturation: 100, lightness: 40 } for hsl random colorArray|Object
epsilonRecursion stops if the subdivision is getting smaller then epsilon. Default: 0.01Number
max-divisionsMaximum random number of cell splitting that could be generated. Default: 4Number

License

MIT