Avatar
Avatar is a JavaScript library for showing Gravatars or generating user avatars.
Examples
There are several examples on the website.
import Avatar from 'avatar-initials';
// or
const Avatar = require('avatar-initials')
// Add an avatar to an <img>
const avatar = Avatar.from(document.getElementById('avatar'), {
'useGravatar': false,
'initials': 'MC',
});
// If you just want the URL / string:
const github_avatar_url = Avatar.githubAvatar({
id: '12345'
});
const gravatar_url_from_email = Avatar.gravatarUrl({
email: '[email protected]'
});
const gravatar_url_from_hash = Avatar.gravatarUrl({
hash: '12929016fffb0b3af98bc440acf0bfe2'
});
const initial_png = Avatar.initialAvatar({
initials: 'MC',
initial_fg: '#888888',
initial_bg: '#f4f6f7',
initial_size: 0, // Defaults to height / 2
initial_weight: 100,
initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
});
This example will render an avatar with my initials "MC" as the image.
Options
Avatar is highly customizable and most options are self explanatory:
{
useGravatar: true, // Allow Gravatars or not.
fallbackImage: '', // URL or Data URI used when no initials are provided and not using Gravatars.
size: 80, // Size in pixels, fallback for hidden images and Gravatar
setSourceCallback: null, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
// Initial Avatars Specific
initials: '', // Initials to be used.
initial_fg: '#888888', // Text Color
initial_bg: '#f4f6f7', // Background Color
initial_size: 0, // Text Size in pixels
initial_weight: 100, // Font weight (numeric value for light, bold, etc.)
initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
// Gravatar Specific
hash: '', // Precalculated MD5 string of an email address
email: '', // Email used for the Gravatar
fallback: 'mm', // Fallback Type
rating: 'x', // Gravatar Rating
forcedefault: false, // Force Gravatar Defaults
allowGravatarFallback: false, // Use Gravatars fallback, not fallbackImage
// GitHub Specific
github_id: null, // GitHub User ID.
}
Installation
npm install --save avatar-initials
or copy the minified build from browser/
<script src="browser/avatar.js"></script>
jQuery Support
I haven't used jQuery in a long time and don't need it personally, so if you still use it the old helper is below.
if (typeof jQuery !== 'undefined') {
jQuery.fn.avatar = function avatar(options) {
return this.each(() => {
/* istanbul ignore else */
if (!jQuery.data(this, 'plugin_avatar')) {
jQuery.data(this, 'plugin_avatar', new Avatar(this, options));
}
});
};
}
Thanks
Pretty styles and design support kindly provided by Andrew Crocker. Originally built with love at Apptentive. Sun Knudsen for providing a PR with setSourceCallback.
License
Avatar is MIT licensed.
4 May 3, 2022
14 Jan 3, 2023
8 Dec 31, 2022
7 Sep 26, 2022
164 Dec 30, 2022
14 Aug 10, 2022
11 Aug 11, 2022
9 Nov 1, 2021
8 Aug 15, 2022
3 Sep 21, 2022
67 Jan 3, 2023
1.8k Jan 3, 2023
1.1k Jan 3, 2023
5 Feb 11, 2022
11 Dec 14, 2022
21 Nov 27, 2022
19 Dec 13, 2022
65 Dec 28, 2022
1 Jun 30, 2022