Avatar Letter

A 3D-ish, stylish, cool, or unique-looking avatar-letter!

I made this to use in another app I'm working on so I don't have to rely on other Avatar libraries or providers, or maybe just for fun.

The idea is to return a beautiful 3D-ish, stylish, cool, or unique-looking letter's image to the user rather than the default ones we see in most applications while making sure to provide a variety of sizes, sets (2 for now), and formats (2 for now) for free.

avatar letter tiny set1 aavatar letter small set1 aavatar letter medium set1 aavatar letter big set1 aavatar letter large set1 aavatar letter full set1 a
3D-ish looking image provided by avatar-letter's set1
avatar letter tiny set2 andyavatar letter small set2 zavatar letter medium set2 oavatar letter big set2 davatar letter large set2 xavatar letter full set2 B
Stylish-looking letter's image provided by avatar-letter's set2samples avatar-letter found elsewhereavatar-letters found elsewhere in component or other libraries

The images were edited in PowerPoint initially after downloading from Freepik first. The images were then resized, compressed, and saved in other formats using the Sharp library. It's crazy how sharp can save hundreds of images on your device in a split of a second.

As far as creating, updating, or deleting any sets, sizes, or formats (basically the static images found in public/letters folder) is concerned, I'd like to be the one maintaining that right now. I will consider ideas for improvement, or ideas for expanding this and providing users with more options

How to use this/How to Get Started?

To use this in your project, the steps are simple:

  1. Simply add the following url as the src attribute in your img tags:https://avatar-letter.fun/api/file/set1/tiny/a/png
  2. Modify the url as per your needs.

Here's a breakdown of the url:

url-breakdown

The complete url looks like the following:

What options or params can I pass in?

returnTypefile (may add more option like returning binary data or may completely remove this)set#set1, or set2 (for now)sizetiny (24px), small (32px), med (48px), big (64px), large (128px), full (225px)namea-z or A-Z only (will find first matching alphabet and return that alphabet's image)formatpng or webp

Credits

The images were downloaded from Freepik and later modified. Here are the direct links: