This package has been deprecated

Author message:

v-avatar has migrated to its new home at @j0nz/v-avatar. Please update your packages accordingly

v-avatar

0.1.1 • Public • Published

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
      }

Package Sidebar

Install

npm i v-avatar

Weekly Downloads

1

Version

0.1.1

License

ISC

Unpacked Size

384 kB

Total Files

19

Last publish

Collaborators

  • reed-jones