Vue Sphere Avatar

A simple component to display a sphere-shaped avatar for users, accounts, companies etc. An image can be used but falls back to initials on a colored background.

Installation

npm install --save vue-sphere-avatar

Usage

You can either use the component globally or locally.

Globally

In your main.js, just import the library using:

import 'vue-sphere-avatar'

Then use the component directly in your template

<sphere-avatar :name="'Strawhat Pirates'" />

Locally

Example usage in a SFC (single file component):

<template>
  <div>
    <sphere-avatar :name="'Strawhat Pirates'" />
  </div>
</template>

<script>
import SphereAvatar from 'vue-sphere-avatar';
export default {
  components: {
    SphereAvatar,
  },
}
</script>

Props

Name	Default	Type	Description
src	null	String	Image source e.g. "https://picsum.photos/200"
size	50	Number	How big is the sphere in height and width
name	-	String	The name where the initials shall be extracted if none is provided
initials	-	String	The initials to put inside the sphere. If none is not provided, it will extracted from name. If name isn't provided a ? is displayed.
color	-	String, Object	The background color of choice. String and Object inputs specified in tinycolor2 are allowed. An invalid input would return black. In case no value is provided, a color based on the name or initials will be assigned. This is to make sure the color doesn't change on every DOM update.
maxFontSize	512	Number	If you want a non-fit avatar display for initials, specify a maximum font size
minFontSize	16	Number	Minimum font size

Fitty

Fitty is utilized to scale up or down the initials so it fits perfectly inside the sphere. To change how that looks, just specify maxFontSize and/or minFontSize accordingly.

Text color - Light or Dark

Text color is automatically contrasted to the background color via tinycolor2.