search

boringdesigners / boring-avatars

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.
https://boringavatars.com
MIT License
5.65k stars 198 forks source link

Restricts Avatar Variations due to Same Mask Use #64

Closed totegamma closed 1 year ago

totegamma commented 1 year ago

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 image ↑second one should be square image ↑ second one should be visible

Desktop:

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

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

totegamma commented 1 year ago

I fixed this with the way to use random maskID. https://github.com/boringdesigners/boring-avatars/compare/master...totegamma:boring-avatars:master?expand=1 I will make this as a PR if you like it.

josepmartins commented 1 year ago

hey @totegamma thanks for dropping this. We had other PR's attempting to fix this issue in the past.

I believe the best solution would be to use the useId hook instead of uuid library. I'll create a PR and release a fix this same week 👍

josepmartins commented 1 year ago

The latest release 1.10.0 should fix the issue. @totegamma let me know if that works.