Avatar with Icon about geist-ui HOT 4 CLOSED

I tried to implement this feature，however, the styles(bgColor, color, border-color, dark-mode...) of icon and avatar can't be well combined.
The ZEIT's example is just a special case, the design of superimposed images is very poor in the general scenes. At present, this design style can not be used as a component library.

The component library needs to consider more marginalized cases, ensure availability in more scenes. So, currently, this feature will not be considered, unless the design is improved.

from geist-ui.

Well, I think Badge is a good idea. I'll implement automatic composition of Badge component in several components later.
For more details, I will come back after PR creation. And thank you for your feedback to make us better.

from geist-ui.

Now you can add Badge to Avatar, preview here.

But the feature of combination SVG / Image and Avatar will not added temporarily, if you need this function, please refer to the follow codes:

() => {
  return (
    <div className="box">
      <Avatar />
      <img src="" className="team" />
      <style jsx>{`
        .box {
          position: relative;
        }
  
        .team {
           position: absolute;
           bottom: 0;
           right: 0;
         }
      `}</style>
    </div>
  )
}

from geist-ui.

can the Avatar component have a 'badge' prop maybe? and we can pass an image? just to render in the lower left or right corner. Vercel has it as an Icon prop but an image can work just as well. anyways thank you.

from geist-ui.