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-divisions props to find something that you like

Name	Description	Type
seed	String used for seeding the random generator	String
colors	Array of valid CSS colors or Object with { saturation: 100, lightness: 40 } for hsl random color	`Array
epsilon	Recursion stops if the subdivision is getting smaller then epsilon. Default: 0.01	Number
max-divisions	Maximum random number of cell splitting that could be generated. Default: 4	Number

License

MIT