PFElements Avatar Element
pfe-avatar is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. If they don't, a nice colored pattern will be generated based on their name. A specific name will always generate the same pattern, so users' avatars will stay static without the need for storing their generated image.
Usage
<pfe-avatar name="Eleanore Stillwagon"></pfe-avatar>
<pfe-avatar name="Libbie Koscinski" shape="rounded" pattern="squares"></pfe-avatar>
<pfe-avatar name="Blanca Rohloff" pattern="triangles"></pfe-avatar>
<pfe-avatar name="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pfe-avatar>Attributes
pfe-name (observed) (required)
The user's name, either given name and family name, or username. When displaying a pattern, the name will be used to seed the pattern generator.
pfe-src (observed)
The URL to the user's custom avatar image. It will be displayed instead of a random pattern.
pfe-pattern (observed)
The type of pattern to display. Currently supported values are "squares" and "triangles".
| squares | triangles |
|---|---|
 |
 |
pfe-shape (observed)
The shape of the avatar itself. Supported values are "square" (default), "rounded", and "circle".
Styling
| Theme hook | Description | Default |
|---|---|---|
--pfe-avatar--colors |
A space-delimited list of colors to use for generated patterns. Only hex values are supported, ex: #fc0 or #0fcb41. Any number of colors may be provided. |
#3B0083 #f0ab00 #007a87 #00b9e4 #92d400 |
Test
npm run test
Build
npm run build
Demo
From the PFElements root directory, run:
npm start
Code style
Avatar (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.