Custom User Avatar Generator by Avatar JS Library

Avatar JS is a vanilla JavaScript avatar generator which helps you to create custom user avatar using Gravatar, Avatars.io or custom styles.

How to use AvatarJS on your projects:

1. Install the Avatar JS via NPM:

npm install avatar-initials --save

2. Import the Avatar JS.

import Avatar from 'avatar-initials';

3. Create an empty tag to place the user avatar.

img src="#" id="example"/

4. 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
});

5. 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'
  },
});

6. 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'"
});