first-letter-avatar

Install

npm install first-letter-avatar --save

Usage

import { FirstLetterAvatar } from 'first-letter-avatar';

const avatar = new FirstLetterAvatar({
    avatarsSelector: ".avatar",
    namesSelector: ".userName",
    backgroundColor: "#171923",
    letterColor: "#fff",
    isCircle: true,
}).renderAvatar();

The number of avatarsSelector and namesSelector elements must be the same.

Example

<div class="comment">
    <!-- .... -->
    <div class="avatar"></div>
    <p class="userName">Lisa</p>
    <!-- .... -->
</div>

Recommended CSS for .avatar

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 60px;
  user-select: none;
}

Styling examples

Options

Name	Type	Description
avatarsSelector	string	Element selector to create an avatar Required
namesSelector	string	Direct selector containing the username Required
backgroundColor	string	Letter background color Default: #151515 You can set the value to random, after the colors for each avatar will be random. List of random colors after the table.
letterColor	string	Letter color Default: #ffffff
fontSize	string	Changes the font-size of a letter Default: 1.5rem
isCircle	boolean	Makes the avatar round Default: false
isBold	boolean	Makes a letter bold Default: false

Array of random colors

 // List of Flat UI Colors
["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d"]