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)

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

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],
]

You can see the component in action in this codesandbox

Development

# Install dependencies
yarn install

# run the unit tests
yarn test

# Build
yarn build 

License

MIT