@j0nz/v-avatar

v-avatar

Easy plug and play user avatars. Current providers include RoboHash, Adorable, UI Avatars, and Gravatar.

Project installation

yarn add v-avatar

// main.js
import VAvatar from 'v-avatar'
Vue.use(VAvatar)

<!-- App.vue -->
<v-avatar mode='robohash'
    :size='512'
    :robohashOptions='{sets: "set4", bgset: "bg2"}'
    username='fuzzykitten'/>

Identifier

The identifier is what is used to create the unique* avatar deterministically (so the same user will always get the same avatar). With the exception of the gravatar mode, the order of precedince is: 1. name, 2. username, 3. email, 4. hash. so with that in mind, if you wanted the avatar to be generated from, lets say, the users email you must not supply a name or username prop. Gravatar works a little differently by trying the hash first, then hashing the email and trying that.

Prop	Type	Default	Description
name	String		Sets the users name
username	String		Sets the users username
email	String		Sets the users email
hash	String		Sets the avatar hash

Options

Common Options to all modes

Prop	Type	Default	Description
mode	String	initials	must be one of [ initials, robohash, adorable, gravatar ]
size	Number	128	Size of the image to be loaded
alt	String		alt tag to be applied to the image. falls back to the used identifier

Mode specific configurations

Prop	Type	Default	Description
uiAvatarOptions	Object	see below	Options applied when mode is set to initials

{
    background: '0D8ABC',   // notice no '#'
    color: 'fff',           // notice no '#'
    'font-size': 0.5,       // default 0.5, available: 0.1 - 1
    length: 2,              // number of chars to be displayed
    rounded: true,          // rounded ot square image
    uppercase: true,        // casing of letters
}

Prop	Type	Default	Description
robohashOptions	Object	see below	Options applied when mode is set to robohash

{
    bgset: ['bg1', 'bg2', false],           // pick one.
    sets: ['set1', 'set2', 'set3', 'set4'], // pick one, or several
    set: false,         // set to 'any' to get all sets
    gravatar: null,     // 'yes' if using email, 'hashed' if using hash identifier (and want to get your gravatar)
}

Prop	Type	Default	Description
gravatarOptions	Object	see below	Options applied when mode is set to gravatar

{
    d: 'identicon', // default/fallback: pick one of [ mp, identicon, monsterid, wavatar, retro, robohash, blank ]
    f: null,        // force-default/fallback: set to 'y' if desired
    r: 'g',         // gravatar rating: g, pg, r, x
      }