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
}