boringdesigners/boring-avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.

Boring Avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.

Install

npm install boring-avatars

Usage

import Avatar from 'boring-avatars';

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
/>;

Props

Prop	Type
size	number or string, 40px (default)
square	boolean: false (default)
title	boolean: false (default)
name	string
variant	oneOf: marble (default), beam, pixel,sunset, ring, bauhaus
colors	array of colors

boring-avatars's Issues

Feature request: option to display avatar with 2 letters over the background

Do you plan to bring a preview with letters overlaying the gradient background ?

Svelte port

Thank you so much for creating this library! I use it all the time.

I recently tried out svelte and loved it! So I decided to create a Svelte port of boring avatars, svelte-boring-avatars. It matches the original API 1:1.

Various SVG size values are not properly set

Describe the bug
Several of the size values used within the generated SVG images are hardcoded and not based on the passed in size prop. This causes the size of the avatar to not always be respected and can lead to it being rendered blurry.

To Reproduce
Steps to reproduce the behavior:
Step 1: go to https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51
Step 2: View source on the page
Step 3: Notice how the width and height (SIZE) in various places ("Viewbox", "mask", and "rect" for instance) are not 120, but instead are hardcoded to 80

Expected behavior
The user-supplied height is properly applied to the full svg

Screenshots
If applicable, add screenshots to help explain your problem.

Note:
I tried manually editing a saved version of the image and setting all the properties to 120 and it works totally fine.

missing documentation to fork, run, build & potential contribute

gm friends, i did a fork and wanted to run myself to probably edit / enhance - to see if i could add my identicon algo's into your existing codebase / code-style - become a contributor - or - at least - learn something from your codebase for my own identicon projects for the fun. so i forked, boring-avatars, then tryed the classic

npm install
npm run build

there is thousands of errors of 96 vulnerabilitys, deprecated stuff, missing webpack stuff,
also npm audit , npm fix , force stuff does not work.

any idea what are hidden requirements to run this repo - lets say on a "virgin machine" ?

i think i have latest npm, node, vue3-stuff installed. probably no typescript, no react ... could you write a little "intro" how to use this repo to develop further on / contribute ?

tyty feel free to check out my identicons

https://github.com/drum-n-bass/heads
https://github.com/emeraldpay/hashicon

Vercel Payment Required

Describe the bug
It seems that the project has exceeded Vercel usage limits, if you were not already aware. A project like this might be able to generate enough sponsor revenue to sustain a higher Vercel plan, although I'm not a Vercel user so not sure.

To Reproduce
Steps to reproduce the behavior:

1. Head to the website

Increase Max-Age on Server

Is your feature request related to a problem? Please describe.

From what I see using https://source.boringavatars.com you use Vercel on the server.

Vercel is very good with cache, you just need to pass the cache-control header.
I've seen you set cache-control: s-max-age=1, but it only lasts for a second, so I experienced a lot of cache misses.

From what I can see, the boring avatar is the same if we specify name.
So the cache-control for when the user sends name should be high.

Describe the solution you'd like

Increase the cache control to something like a day or a week.
In express, is something like:

response.set('Cache-control', 'public, max-age=86400')

Describe alternatives you've considered

Just the option of increasing cache control.

Additional context
Add any other context or screenshots about the feature request here.

TypeError: n.useId is not a function

Describe the bug
Page crashes with the error: "TypeError: n.useId is not a function"

To Reproduce

1. install boring-avatars via npm
2. use basic example from readme in a react component

Expected behavior
No error.

Screenshots

Desktop:

• OS: Windows 11
• Browser: Chrome (v 120)
• React 17.0.2

SSL_ERROR_BAD_CERT_DOMAIN

Hi, it seems there is a SSL_ERROR_BAD_CERT_DOMAIN on https://boringavatars.com/

And even if I try to bypass the error, I can't open the page.

Do you have any hosting or certification problem ?

Square avatars

Hey nice work! Would be amazing to have square avatars.

Framework-agnostic usage without React

Is your feature request related to a problem? Please describe.
Currently I can't use this excellent package without React.

Describe the solution you'd like

Something like this:

import { generateAvatar } from 'boring-avatars';

const avatar: string = generateAvatar({ size: 40, name: 'Maria Mitchell' /* Other supported settings, same as props */ });

So generateAvatar would just return the raw HTML string that could then be used in any JS framework.

Describe alternatives you've considered

Additional context

Expand size prop

TYPE: Feature Request

First off, thank you for this sweet package!

I'll be using the Vue port of it, however I think the general package can benefit from this request (if implemented).

FEATURE DETAILS:

I think this package is useful outside of just Avatars.

My specific use case is that I want to use the gradient generator for a large banner, and would love to have a height, width option instead of just the size prop.

This also goes hand-in-hand with the borderRadius prop PR #8, which I saw by @kacgrzes

WHY NEEDED?

This would allow us to utilize the package to create unique banners, backgrounds, and other elements of app detail pages. We could then use a user's ID, an item ID, or (in my use case) a blockchain address to create unique gradients.

Iterate on randomness

First, love the library! We're looking into implementing it in our design system to improve the ability to disambiguate between users that have the same initials.

I was doing some stress tests and noticed that there probably could be a bit more randomness injected. Here's an example where I circled ones that looked a little too similar:

Happy to help if you have some thoughts on algorithms and such.

Is there an open api?

Is there an open api where you can send a request and get a random picture with a smile from the "beam" section?

Warning passing square true

Warning: Received `false` for a non-boolean attribute `rx`.

If you want to write it to the DOM, pass a string instead: rx="false" or rx={value.toString()}.

If you used to conditionally omit it with rx={condition && value}, pass rx={condition ? value : undefined} instead.
rect
mask
svg
w@webpack-internal:///./node_modules/boring-avatars/build/index.js:1:9579

using:

    <Avatar
      square={true}
      ...
    />

Multiple random requests from the same tab return the same avatar.

I am using it in an express project where I iterate over user comments to display them
In the user avatar, I have added this boring avatar link as source which is executed multiple times as the comments are iterated over.
Edit: I am not passing the username here
They all return the same avatar.

Provide non-react support

I would like to use the lib in a non-react project.

Would it be possible to provide (even not advanced and full) a solution for vanilla JS or web elements? If it is reasonably straightforward code, would be happy to provide PR.

Failed to parse source map from ...

Hello and thanks for your work!
After having installed your library I get this warning:

WARNING in ./node_modules/boring-avatars/build/index.js [1] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [1] Failed to parse source map from '/Users/User/Work/list/project/client/node_modules/boring-avatars/build/index.js.map' file: Error: ENOENT: no such file or directory, open '/Users/User/Work/list/project/client/node_modules/boring-avatars/build/index.js.map'

The library works even with that warning, still I wondered if there's a workaround to fix this.
Thank you again :)

Export to png and set dimensions for it

I would like to be able to get the result not only in SVG, but also in PNG format. Since, for example, when zooming on the site, and if you scroll the page, the SVG picture will slow down a little.

How to use it in vanilla HTML and Javascript?

How to use it in vanilla HTML and Javascript?

Vue.js port of boring-avatars

First of all, really impressed with your work here!

Since I am mainly a Vue user, I decided to make a Vue port called vue-boring-avatars. It uses a similar API with the same props, so you should be at home right away. Happy to discuss merging the Vue version to this repo if that is more desirable.

Add a "avatar" category tag to the github project

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Add a "avatar" tag on the github project

Additional context
I've tried to find an avatar service/component to use on my project, and this lib didn't appeared for me while searching for "avatar" category on github

(:

Whether Android and Ios are supported

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

"beam" and "marble" avatars not respecting the square prop

Hey!

I'm not sure why, but both "beam" and "marble" don't render as squares. Below is the component:

<Avatar
    size={20}
    name={"Anonymous"}
    variant="beam"
    colors={["#3C3D39", "#D9F5D9", "#9BE49B", "#FFE2AA", "#FFF5E0"]}
    square
/>

and if I do the following with "pixel":

<Avatar
    size={20}
    name={"Anonymous"}
    variant="beam"
    colors={["#3C3D39", "#D9F5D9", "#9BE49B", "#FFE2AA", "#FFF5E0"]}
    square
/>

It renders square. I can't figure what I could be doing wrong here. It all seems simple enough.

`Element type is invalid` error in latest Remix.run project

Describe the bug
The Avatar component is not working in latest Remix.run project. Getting this error

To Reproduce
Steps to reproduce the behavior:

1. Create a new Remix app
2. Install the library
3. Add the default Avatar component.
4. See error

Expected behavior
It should render the avatar

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Arc
• Version Latest

Additional context
I even tried making the component client side only, and skipping the render of it during SSR, still getting the issue.

Property square for variant marble not working

Hey,
as stated in the title, the marble variant is with square not working.

v.1.5.8

      <Avatar
        size={40}
        name="sdfasdf"
        variant="marble"
        square={true}
        colors={[
          brandColor.teal500,
          brandColor.cyan600,
          brandColor.blueGray500,
        ]}
      />

Thanks for your work!

Invalid SVG Markup

The SVG tag includes attributes that are not valid HTML, such as name colors and size.

Question: how to help you to add more svg patterns ?

Beautifull abstract avatars with custom color codes would be a great aesthetical alternative for the web, compared to ugly gravatars. Having a good pattern diversity would be wonderfull

How to help you to add more patterns ?

Dribbble is full of examples:

Patternpad could be a good inspiration

https://patternpad.com/editor.html

Use a hashing algorithm

Hi. Thanks for this app, first of all!

As I see, we have not so much of alternatives?

Restricts Avatar Variations due to Same Mask Use

Describe the bug
When rendering several amounts of avatars, each avatar has its mask with the id "mask__beam"(when using avatar-beams.js).
But this is "ID," so the avatar's lookups are the first.
With this, we can't use circle and square avatars on the same page. And also, when specifying 'visibility: hidden' to the first one, the others go to hidden too.

To Reproduce

1. Go to https://codesandbox.io/s/inspiring-benz-rg5y6f?file=/src/App.js
2. I coded two avatars. One is a circle, and the other one is a square. But it rendered both squares.

Expected behavior
It should be square and circle.

Each avatar would have a random id or use border-radius instead.

Screenshots

↑second one should be square

↑ second one should be visible

Desktop:

• OS: Windows10
• Browser GoogleChrome
• Version 114.0.5735.91

Additional context
ref: https://www.antonball.dev/blog/2020-06-15-svg-id-collision/

Thanks for developing this library! I love 'beam' cute avatars.

500: INTERNAL_SERVER_ERROR

https://source.boringavatars.com/beam/126/S%C3%A9bastien%20LeBlanc?colors=22131d,682959,7e326c,985b89,e0d4dd&square

How to ensure that the avatars are gender neutral?

Is your feature request related to a problem? Please describe.
This is a question than a feature request.
I am unable to find any information related to making this gender neutral.

Describe the solution you'd like
If there is an option to specify gender, like male, female, neutral, it would do.

Copy random color palette from website as code snippet

Is your feature request related to a problem? Please describe.

I'm on https://boringavatars.com and I found a random palette that I'd like to use in my code.

Describe the solution you'd like

I'd like to be able to click a button that lets me copy the random palette as a React code snippet, and potentially a source.boringavatars.com URL too.

Describe alternatives you've considered

I think the alternative would be to use the web inspector in my browser to copy the HEX values out of the DOM and reconstruct that into a color string in my React code.

Additional context

This project is really delightful, and exactly what I was looking for. Hat tip to @hangtwenty for letting me know about it. 🙏🏼

Avatar missing blur filter - Make filter ids unique to avatar instances

Describe the bug

Marble avatars lose the fegaussianblur filter on Safari

To Reproduce
Steps to reproduce the behavior:

1. Render a list of avatars with some logic to change a state and trigger a render
2. Trigger the render multiple times

Expected behavior
Avatar keeps the fegaussianblur filter

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Safari
• Version: 1.6.3

Smartphone (please complete the following information):

• Device: iPhone 12 mini
• OS: iOS 15.5
• Browser: Safari

Additional context
A similar change made in Make mask ids unique to avatar instances but to the prefix__filter0_f ID solved the problem

PHP Laravel Blade Version!!

I fell in love with this package once I saw it.

I want to deliver your work to different developers by converting it to Blade version working with Laravel
I started with Beam avatars (the variant I like the most) and will add the rest later. you can find my version here

I saw the discussion of merging Vue.js version #11 and it'll my pleasure to discuss the blade version too

Get avatar via URL

Would it be possible to have this on a hosting site where we can get an avatar via URL like how the following URLs are doing?

https://placeholder.com/
https://placekitten.com/
https://placedog.net/

Question: Get a png format instead

Hey!
First off, thank you for this amazing library! 😍

It would be useful if I could possibly somehow get the avatar as a png/jpeg. Or if this is already possible, how can I do it?

Invariant violation on React Native

Awesome project! Does this work with React Native? I tried installing it but get this error when calling Avatar:

Invariant Violation: View config getter callback for component rect must be a function (received undefined). Make sure to start component names with a capital letter.

I'm using the example code.

import Avatar from "boring-avatars";

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>;

"react": "17.0.1",
"react-native": "0.64.1",

Add links to community supported implementations

I think it would be helpful to have links to all the community supported implementations of boring-avatars in the readme.

The ports I'm aware of:

• Vue
• Laravel Blade
• React Native

Reply to this issue with any other implementations that exist :)

[FR] Allow PNG downloads

Doc request: length of colors array

What is the minimum / maximum length required for the array of colors ?

Two lockfiles

I see both package-lock.json and yarn.lock in the repo. The latter was last updated 5 months ago so I assume that's redundant now? Consider removing one.

P.S. Are lockfiles really needed for a library?

[Feature Request] We'll like to see in the future that this library supports React-Native.

This is an awesome library but is there any plan to make it work with React-native?

Thanks for the hard work !!!

v1.8.0 missing JS bundle

Describe the bug
I just happened to be upgrading our dependencies and noticed that the just released v1.8.0 is missing the JS files. Downgrading to v1.7.0 works.

To Reproduce
Steps to reproduce the behavior:

1. Install v1.8.0
2. Check node_modules/boring-avatars/
3. Observe that there are no JS files (build/index.js is missing)

Expected behavior
The JS should be included in the release artifacts.

Add support for initials

Context

There's no way to generate initials on top of avatars without custom solutions.

This pertains particularly to the marble type unlike the other, visually busier, types.

Proposed solution

An initials prop that takes a boolean or formatting function. If nothing else specified then use the name to generate initials. It would also be nice to be able to define the min or max amount of initials to display.

Alternatives

Other libraries that support initials or custom solutions.

Same url generate different image

Describe the bug
Same url generate different image

To Reproduce
ex : https://source.boringavatars.com/marble/80/?colors=a7c5bd,e5ddcb,eb7b59,cf4647,524656
and spam F5 to refresh page, image with same url are different

How to fix this image (for example to save the string on database for a nice user avatar)

Thanks ! :)

Random avatars

Do we support the ability to get a random avatar per variant?

The use case would be to use this on a loop where each item doesn't have an avatar yet

Probably the API would be something like

<Avatar
  size={40}
  variant="marble"
  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>

When no name passed it will pick any of the avatar from the marble collection

rm command will not work in windows or non-unix systems during build

The rm command specified in the build script of package.json would fail because contributors using non-unix systems may not have it in path.

So, would like to have a script in /scripts/ folder to remove the mapping file from build directory

Are you considering supporting PNG format avatars

There are issues with parsing the SVG format in some frameworks. Would you consider supporting the PNG format in the future

Colors do not match

Describe the bug
I'm using the five colors that the component asks, but they show another color that I didn't put.

To Reproduce
Steps to reproduce the behavior:
On the Avatar component write the five colors that the component ask and see if it shows exactly that five colors.

Expected behavior
Show just the colors that I introduce

Screenshots

Desktop (please complete the following information):

• OS: MacOs
• Browser Brave
• Version [e.g. 22]

Disable title

I want to overlay my own tooltips onto the avatar. Is there a way to disable the titles?