letter-avatar-image/README.md

A simple and lightweight package to generate letter-based avatars with customizable styles and colors, perfect for displaying initials or user profile images in your applications. `letter-avatar-image` is an easy-to-use npm package that allows you to gene

# 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.

[![npm version](https://badge.fury.io/js/letter-avatar-image.svg)](https://badge.fury.io/js/letter-avatar-image)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

# 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:

![S](https://drive.google.com/uc?id=1FwNeU0g48xFBK31-c-h2ravh2-RvzmTD) 
![A](https://drive.google.com/uc?id=1FwHcCfpAWo5YHMmLv67fGeXCC9P1Zthl)
![M](https://drive.google.com/uc?id=1Ftitv8S-BMN-YSzfyWOPWm5oV0Z45FAs)
![P](https://drive.google.com/uc?id=1FroUxQGLzKeaxWoqE5nbSF0QmGmzE7KY)
![L](https://drive.google.com/uc?id=1Fo0WIUitlTWJEyleeJgzWv_ByO4UWDGR)
![E](https://drive.google.com/uc?id=1G-MrVaVZhHemBy3Mjn5MtcOnBn8rOzMI)

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

![D](https://drive.google.com/uc?id=1G6YqyfwUg9SdmWXNMyDjMOlNBK5kk8n7) 
![E](https://drive.google.com/uc?id=1FzPAjek_dhErbaFFNzlQ4VHwJIM2EAvb)
![M](https://drive.google.com/uc?id=1FzCTZhw-Uk6Ac1DnqSPaBCUVL_c8IPjb)
![O](https://drive.google.com/uc?id=1FxtEzc5wx-lw5N8l2hEgj-uPd3i9B7xL)


## Square Double Letter Images
These images depict letter icons with smooth, rounded edges, offering a more curved and softer appearance:

![Sa](https://drive.google.com/uc?id=1FjEpnWuQxuc7K-ZQRZzzyAZMtbpOwRS1) 
![mp](https://drive.google.com/uc?id=1FhqorefXZcJyHAluXmJdDrrkzwsLAPKM)
![le](https://drive.google.com/uc?id=1FwZll_-vi7LC3G6shN6IZZ4w0HqQownq)


## 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:

```bash
  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:

```javascript
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:

```javascript
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.                      |

## 🔗 Author Details
[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://tirth-gaudani.github.io/portfolio/)
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://in.linkedin.com/in/tirthgaudani)