vue-avatar-component provides a simple way to create round and colorful Avatar stickers for use in your applications.

If you just provide a name to the component, I will display a colored correction that shows the first letters of the presented name. Its color depends and is unique to each specific name.

If you submit the URL for the image, this image, its size, and a piece will be displayed to fit the deputy component.

How to make use of it:

Installation

npm install --save-dev vue-avatar-component

Usage

<template>
  <div>
    <avatar fullname="My Sticker" :size="96"></avatar>
  </div>
</template>

<script>
  import Avatar from 'vue-avatar-component'
  export default {
    components: { Avatar }
  }
</script>

Properties

fullname : the full name from which the initials and the color will be computed. Initials are extracted by taking the first letter of each word, separated by a space or a hyphen. If there is more, only the 3 first initials are kept. For example, Foo Bar gives FB, My Foo-Bar gives MFB, FOO gives F and My Fantastic Vue Component gives MFV. If not provided, the full name defaults to ‘##’.

size : the size of the sticker to generate, in pixels. If not provided, the size defaults to 48 pixels. The font size inside the avatar is computed from its overall size (half if 1 or 2 letters, third for 3 letters).

image : the url of the image to fit in the avatar sticker. If provided not empty, initials will not show and the image wil be shown. Be careful that if the provided image url is wrong, the component has its size but shows nothing.

radius : percentage of the overall size to show the rounded corners of the avatar. Provide a number between 0 and 50: at 0%, the avatar will be a square, at 50% it will be exactly circular. This percentage defaults to 50 if not provided.

color : If provided, overrides the computed color for the initials-based avatar. Just provide a CSS color (named, hex or rgba fits).

create rounded and colored avatars in vue js, vue-avatar-component Plugin/Github

See Demo And Download

Official Website(vertcitron): Click Here

This superior jQuery/javascript plugin is developed by vertcitron. For extra advanced usage, please go to the official website.