Skip to content

Polymer component to auto-generate user avatar

Notifications You must be signed in to change notification settings

imcdonagh/paper-avatar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Published on webcomponents.org

<paper-avatar>

This component is made for generate a different random avatar for every member.

Example

<style is="custom-style">
	paper-avatar.red {
		--paper-avatar-color: red;
	}
	paper-avatar.large {
		--paper-avatar-width: 60px;
	}
</style>
<paper-avatar label="Abe90"></paper-avatar>
<paper-avatar label="Abe90" src="https://avatars.githubusercontent.com/u/4205629"></paper-avatar>
<paper-avatar label="Abe90" two-chars></paper-avatar>
<paper-avatar label="Abe90" class="red"></paper-avatar>
<paper-avatar label="Abe90" class="large"></paper-avatar>
<paper-avatar label="Abe90" jdenticon></paper-avatar>

Background color

The background color is automatically generated by hashing the label and selecting from an array of colors.

You can setting up this array passing the values in colors parameter.

Default colors

Default colors

Two chars

The two-chars parameter is used to show two chars in the generated avatar.

If the label is composed of a single word, you'll see the first two letters of that word; the first letter will always appear capitalized.

If instead the label is composed of two words, will be displayed the first letter of every word.

Example

  • first: Fi
  • First: Fi
  • first second: Fs
  • First Second: FS

Customization

There is the opportunity to change some parameters to customize the generated avatar.

The css parameters --paper-avatar-color and --paper-avatar-width correspond to the background color and the size (width and height) of the avatar.

Jdenticon (jdenticon.com)

Jdenticon is a free Javascript library for generating highly recognizable identicons.

You can use this library adding jdenticon parameter. In this case the text will be replaced with white jdenticon image.

More information at jdenticon.com

Install

bower install --save imcdonagh/paper-avatar

About

Polymer component to auto-generate user avatar

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 100.0%