what is this
java script library to generate avatar with name initials:)
Installation
npm i avatarinit --save
https://www.npmjs.com/package/avatarinit
usage...
import {avatar_initials, getInitials} from 'avatarinit';
avatar_initials({
width: '50px',
height: '50px',
font_weight: '600',
background: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5'],
color: 'red',
padding: '2px'
})
update in this version(1.1.4):
-
you can pass 'n' numbers of color, if u want same background color for all the avatar then just pass one color in the background array.
-
also you can pass either color name or hex code of the color.
-
for any query or suggestion, please join our discord server:
https://discord.gg/QafWk8msHN
Note
need to follow:
- apply class as 'avatar_initials' in your template file.
- pass the firstName and lastName in the 'getInitials' function.
example:
<div class="avatar_initials"> {{getInitials('john','doe')}}</div>
Angular/Ionic Implementation
- test-component.component.ts
import { Component, OnInit } from '@angular/core';
import * as avatarini from 'avatarinit';
@Component({
selector: 'app-test-component',
templateUrl: './test-component.component.html',
styleUrls: ['./test-component.component.scss'],
})
export class TestComponentComponent implements OnInit {
constructor() { }
ngOnInit() {
avatarini.avatar_initials({
width: '50px',
height: '50px',
font_weight: '600',
background: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5'],
color: '#fff',
padding: '2px'
});
}
getName(firstName: string, lastName: string) {
return avatarini.getInitials(firstName, lastName);
}
}
- test-component.component.html
<div class="avatar_initials"> {{getName('john','doe')}}</div>
<br>
<div class="avatar_initials"> {{getName('java','script')}}</div>
***Result