A Text Avatar Component For Vue.js

vue-avatar is an avatar component of vue.js. This component displays an avatar and if none is provided it backs up to the username’s initials. This component is heavily inspired by the user-interaction avatar.

material ui avatar with text, react user avatar example, material ui avatar example, vue avatar component, material ui avatar image size

Rules used to calculate the initials of a username:

Divide the username with a space and a hyphen
Use the first letter of each part
Never use more than three characters as initials
If the username is divided into more than three parts and one part of it begins with an uppercase letter, skip the parts that begin with a lowercase letter.

Nice Online Avatar Editor / Preview Generator in Vue

How to make use of it:

Install & Download:

npm install vue-avatar

Usage

import Avatar from 'vue-avatar'

export default {
  ...
  components: {
    Avatar
  },
  ...
}

After that, you can use it in your templates:

<avatar username="Jane Doe"></avatar>

var Vue = require('vue')
var Avatar = require('vue-avatar')

var YourComponent = Vue.extend({
  ...
  components: {
    'avatar': Avatar.Avatar
  },
  ...
})

Props

Name	Required	Default	Type	Description
username	N	–	String	The user name that will be used to compute user initial.
initials	N	–	String	Force the displayed initials by overriding the computed ones.
inline	N	false	Boolean	Uses inline-flex instead of flex
src	N	–	String	Path to the avatar image to display.
:customStyle	N	–	Object	A custom style object to override the base styles.
backgroundColor	N	–	String	The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length.
color	N	–	String	The font color used to render the user initials. If none is provided, the background color is used to compute the font color.
:lighten	N	80	Number	A factor by which the background color must be lightened to produce the font color. Number between [-100,100].
:size	N	50	Number	The avatar size in pixel.
:rounded	N	true	Boolean	True if the avatar must be rounded.
:parser	N	[getInitials()](https://github.com/eliep/vue-avatar/blob/master/src/Avatar.vue#L8-L27)	Function	Custom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String.

Event

Name	Arguments	Description
@avatar-initials	username (the value of the username props), initials (the value of the computed initials or the initials props if any)	This event is trigger when the component is ready with component username and initial.

Text Avatar Component, vue-avatar Plugin/Github