Letter Avatar Image

letter-avatar-image is an easy-to-use npm package that allows you to generate personalized avatar images with just a letter or a string. It provides a simple way to create user profile avatars based on initials or any other string. The generated avatars are styled dynamically, with customizable options such as colors, fonts, shapes, and more.

Perfect for use in applications that need default user avatars or for any project requiring quick, unique profile pictures.

Screenshots

Square Letter Images

These images depict letter icons with sharp, square edges. The images provided below give a clean, angular look with their well-defined corners:

Rounded Letter Images

These images depict letter icons with smooth, rounded edges, offering a more curved and softer appearance:

Square Double Letter Images

These images depict letter icons with smooth, rounded edges, offering a more curved and softer appearance:

Features

• Customizable Initials: Generate avatars from a string or initials (e.g., user name or email).
• Shape Options: Choose from circular or square avatar shapes.
• Color Customization: Select a background color or let it randomly generate one from a color palette.
• Font and Text Style: Adjust font type, size, and text alignment to suit your design needs.
• Text Stroke Support: Add a stroke to the avatar text for better visibility.
• Responsive: The avatars scale appropriately based on the container size.

Installation

You can install the library using npm:

  npm install letter-avatar-image

For Node.js or Backend

This section demonstrates how to convert TEXT into an Avatar Image using the letter-avatar-image library in a Node.js environment.

Code Example

To generate an avatar image in Node.js, use the following code:

const { LetterAvatar } = require('letter-avatar-image');

const avtarGenerate = async () => {
  const avtar = await LetterAvatar({
    width: 100,            // Width of the avatar image
    height: 100,           // Height of the avatar image
    letter: "Sample",      // The text or initials to display in the avatar
    textColor: "#ffffff",  // Text color inside the avatar
  });

  return avtar; // Return the generated avatar
}

Explanation:

• LetterAvatar: The main function that generates the avatar based on the provided options.
• width and height: Define the size of the avatar image.
• letter: The string or initials to display inside the avatar.
• textColor: The color of the text inside the avatar.

For React.js, Next.js, or Frontend

This section demonstrates how to use the letter-avatar-image library to generate avatar images from TEXT in a React.js or Next.js environment.

Code Example

To generate an avatar image in React or Next.js, use the following code:

import LetterAvatar from 'letter-avatar-image';

const avatar = new LetterAvatar({
  letter: 'John Doe',          // The string or initials to display in the avatar
  width: 100,                  // Width of the avatar
  height: 100,                 // Height of the avatar
  textColor: '#fff',           // Color of the text inside the avatar
  font: 'bold 60px Arial',     // Font style of the text
  isRounded: true              // Set to true for a circular avatar (rounded shape)
});

const avatarDataURL = avatar.generate(); // Get the avatar's data URL

Explanation:

• letter: The initials or text that will be displayed inside the avatar.
• width and height: Set the size of the avatar.
• textColor: Specifies the color of the text inside the avatar.
• font: Defines the font style and size for the avatar text.
• isRounded: If set to true, the avatar will have a circular shape; otherwise, it will be square.

LetterAvatar Parameters

The LetterAvatar function accepts the following options to customize the avatar:

| Parameter | Type | Required/Optional | Default Value | Description | |----------------------|------------|-------------------|----------------------------------|----------------------------------------------------------------------------------------------| | width | number | Required | 100 | Width of the avatar image. | | height | number | Required | 100 | Height of the avatar image. | | letter | string | Required | A | The initials or text to display inside the avatar. | | font | string | Optional | 'bold 60pt Graphiks' | The font style and size for the avatar text. | | textColor | string | Optional | #ffffff | Color of the text inside the avatar. | | textAlign | string | Optional | center | Horizontal alignment of the text inside the avatar. | | textBaseline | string | Optional | middle | Vertical alignment of the text inside the avatar. | | strokeColor | string | Optional | #000000 | Color of the stroke around the avatar text (if isStroke is true). | | isStroke | boolean | Optional | false | If set to true, adds a stroke around the avatar text. | | strokeWidth | number | Optional | 1 | Width of the stroke around the avatar text (if isStroke is true). | | isTextStroke | boolean | Optional | false | If set to true, adds a stroke to the text inside the avatar. | | textStrokeColor | string | Optional | #000000 | Color of the stroke around the text inside the avatar (if isTextStroke is true). | | textStrokeWidth | number | Optional | 1 | Width of the stroke around the text inside the avatar (if isTextStroke is true). | | colors | array | Optional | All Colors | Array of colors for generating random background colors for the avatar. | | singleColor | string | Optional | | A single color to set as the background for the avatar (overrides colors). | | isRounded | boolean | Optional | false | If set to true, the avatar will be rounded (circle); otherwise, it will be square. | | roundedStrokeWidth | number | Optional | 1 | Width of the stroke around the avatar when isRounded is true. | | isUpperCase | boolean | Optional | true | If set to true, the text inside the avatar will be converted to uppercase. | | textCharacter | number | Optional | 0 | The number of characters from the initial text to display in the avatar. |

🔗 Auther Details