Custom User Avatar generator-Avatar. js

Vista prévia

Descripción

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

Funcionamiento

Instale el avatar. js a través de NPM:

# NPM
$ npm install avatar-initials --save

Importa el avatar. js.

import Avatar from 'avatar-initials';

Cree una etiqueta IMG vacía para colocar el avatar de usuario.

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

Genere un avatar formando una cuenta de Gravatar.

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


 });

Generar un avatar forma una cuenta de Avatars.io.

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'

},

});

Genere un avatar personalizado a partir de texto sin formato.

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

});