VueAvatar

Avatar component for VueJS 2

  • Use username to create letter avatar (up to 3 chars)
  • If an image src is provided, will try to use it as avatar
  • Images are lazy loaded. If it is not loaded successfully, it will not be used (letter avatar as fallback)
View demo Download Source

Installation

npm install --save @lossendae/vue-avatar

Usage

ES6

import Vue from 'vue'
import VueAvatar from '@lossendae/vue-avatar'

// If not installed globally
export default {
    ...
    components: {
        VueAvatar
    },
    ...
}

CommonJS

const Vue = require('vue')
const VueAvatar = require('@lossendae/vue-avatar')

// In your component if not installed globally
Vue.extend({
    ...
    components: {
        'vue-avatar': VueAvatar.VueAvatar
    },
    ...
})

Make available globally

Vue.component('vue-avatar', VueAvatar)

Usage

<vue-avatar :username="'Franck Zappatta'" :src="'/path/to/img'"></vue-avatar>

Props

Name Type Required Default Description
username String true - String used for the letter avatar (up to three characters)
size Number false 50 Size in pixels of the avatar
src String false - Optional image source path to use for the avatar
colors Array false DEFAULT_COLORS[] (see below) Pool of colors used for avatar background image (expect array of hsl values)
borderRadius Number false 50 Value of the border radius for the avatar
customStyles Object false {} Custom style object to merge with the default style
delay Number false 0 * See below

delay prop

Specify the delay in milliseconds to wait before attempting to load the image src.

This allows to show the letter avatar for the given time and then eventually load the image.

Vue-avatar uses vuejs built-in transitions to let you switch smoothly between the letters and the image.

By default, the transition will not do anything, but with a little bit of css you can for example flip the avatar to the image once loaded :

/* Add this to your css file or into your component style to flip the avatar into the image if the image is loaded successfully */
/* The animation should also be triggered when the prop src changes */
.vue-avatar-enter-active {
  animation: vue-avatar-in .8s;
}

.vue-avatar-leave-active {
  animation: vue-avatar-in reverse;
}

@keyframes vue-avatar-in {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

@keyframes vue-avatar-out {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

The above transition was made using animate.css

Default colors

VueAvatar

In you want to override those colors, use the colors props by passing an array of hsl colors

See below the values used for the above example:

const COLORS_HSL = [
    [6, 71, 60],
    [340, 85, 66],
    [291, 49, 60],
    [263, 49, 63],
    [232, 46, 64],
    [218, 93, 67],
    [187, 73, 70],
    [187, 73, 58],
    [175, 43, 50],
    [151, 44, 53],
    [88, 53, 59],
    [66, 73, 59],
    [51, 95, 53],
    [47, 100, 49],
    [40, 100, 50],
    [16, 100, 69],
    [0, 0, 76],
    [201, 17, 62],
    [17, 16, 56],
    [0, 0, 64],
    [233, 47, 79],
    [262, 49, 74],
    [0, 0, 76],
    [187, 73, 70],
    [15, 15, 69],
    [88, 52, 67],
]

Development

# Install dependencies
yarn install

# run the unit tests
yarn test

# Build
yarn build

GitHub