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.

npm install --save vue-sphere-avatar

You can either use the component globally or locally.

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'" />

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>

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 is automatically contrasted to the background color via tinycolor2.