Custom User Avatar Generator – Avatar.js

Category: Image , Javascript | January 9, 2021
Author:MatthewCallis
Views Total:1,283 views
Official Page:Go to website
Last Update:January 9, 2021
License:MIT

Preview:

Custom User Avatar Generator – Avatar.js

Description:

Avatar.js is a vanilla JavaScript avatar generator which helps you to create custom user avatar using GravatarAvatars.io or custom styles.

How to use it:

Install the Avatar.js via NPM:

# NPM
$ npm install avatar-initials --save

Import the Avatar.js.

import Avatar from 'avatar-initials';

Create an empty img tag to place the user avatar.

<img src="#" id="example">

Generate an avatar form an Gravatar account.

var avatar = new Avatar(document.getElementById('example'), {

    // uses Gravatar
   'useGravatar': true,

    // path to fallback image
   'fallbackImage': '',

    // avatar size
   'size': 80,

    // precalculated MD5 string of an email address
   'hash': null,                   

   // email for the Gravatar
   'email': null, 

   // fallback type
   'fallback': 'mm',

   // rating
   'rating': 'x',

   // force defaults
   'forcedefault': false,

   // Use Gravatars fallback image
   'allowGravatarFallback': false
   
});

Generate an avatar form an Avatars.io account.

var avatar = new Avatar(document.getElementById('example'), {

    // uses Avatars.io
    use_avatars_io: true,

    // Avatars.io options
    avatars_io: {

      // user ID
      user_id: null,

      // avatar Identifier
      identifier: null, 

      // // Twitter ID or Username
      twitter: null,       

      // Facebook ID or Username
      facebook: null,      

      // Instagram ID or Username
      instagram: null,     

      // small, medium, large
      size: 'medium'
  },

});

Generate a custom avatar from plain text.

var avatar = new Avatar(document.getElementById('example'), {

    // avatar text
    initials: '', 

    // text color
    initial_fg: '#888888',

    // bg color
    initial_bg: '#f4f6f7',

    // font size
    initial_size: null, 

    // font weight
    initial_weight: 100, 

    // font family
    initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'"

});

Changelog:

v5.0.0 (01/09/2021)

  • 2021 Update

You Might Be Interested In:


Leave a Reply