Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.
"A picture is worth ten thousand words", although you should not always be so quick to judge people by their profile image. Nowadays, an avatar can be just about anything, including the initials of the name, a generated sketch like GitHub or a person’s portrait.
This week, we are introducing some excellent web components, which can manage any of the formats above. The components will be segmented based on their characteristics.
Lrndesign-avatar by lrnwebcomponents & paper-avatar by Abe90 (Two initials, Jdenticon and Image Source)
The resemblance of these two components is uncanny. Both generate a rounded avatar, which you can fill using either initials, jdenticon or any image source. The two components also provide different CSS custom properties and component attributes to modify the background color and the size of the canvas.
One extra tip: with paper-avatar, you can include both attributes label and src, and label will act as a fallback if the image link returns 404.
| Component |
Demo |
Library |
Browsers |
| Polymer#^1.11.1 |
 |
||
| Polymer#^1.0.0 || 2.0.0 |
 |
Paper-userpicture by petja, paper-avatar by NeilujD & Fop-avatar by FriendsOfPolymer (Initials and Image Source)
Here are the options that these three share in common: displaying the first initial and getting an image from a source. Also, here are their individual traits:
Paper-userpicture
Paper-userpicture can show the name under the avatar with the attribute show-name.
Paper-avatar
Paper-avatar is clickable, with some events dedicated to it, which means you have more room to play around. For example, you can embed the profile link to the picture. Also, it has a default icon if the source is broken.
Fop-avatar
Fop-avatar can be selected by clicking on it. This can be handy when you build an app that needs to choose employees with the same name, as the profile image can be used to distinguish them easily. Upon clicking, a tick overlay will appear over the picture.
| Component |
Demo |
Library |
Browsers |
| Not available |
Polymer#^1.4.0 |
 |
|
| Polymer#^2.0.0 |
 |
||
| Not available |
Polymer#^1.4.0 |
 |
Initials-placeholder by JaySunSyn, K-avatar by K4ng & Dile-avatar by Polydile (Lightweight avatar components having only one option)
If you want to implement only one way of choosing an avatar and you’re looking for some lightweight components, then these are the most suitable components.
initials-placeholder
For instance, initials-placeholder can display only the initials, and you can either choose between showing one or two initials.
k-avatar
The concept of k-avatar is the same like initials-placeholder.
dile-avatar
On the other hand, dile-avatar accepts only an image source as the input.
By default, initials-placeholder and dile-avatar are rounded. K-avatar is square but you can change the border-radius quickly with its attribute.
| Component |
Demo |
Library |
Browsers |
| Not available |
Polymer#^1.1.0 |
 |
|
| Not available |
Polymer#^1.1.0 |
 |
|
| Polymer#^2.0.0 |
 |
Final Words
Considering the avatar is the first thing you see on a person’s profile, it’s crucial to implement a consistent system for choosing it. With these easy-to-use components, we hope you can find one that suits your application best.
Click here for more awesome web components