Custom Avatar Initials

Custom Avatar Initials is simple Web Components Custom Element, that allows to generate fully customizable avatar for web applications. It's appearance can be adapted to the theme used in project. Also it can by used in React, Angular or other framework for web development.

Setup

1. Installation

npm i custom-avatar-initials
# or 
yarn add custom-avatar-initials

2. Including

Pure html example:

<script src="node_modules/custom-avatar-initials/src/avatar-initials.js"></script>

Attributes

Attribute	Description	Default
initials	Letters rendered inside avatar. It has major priority to render when initials and string are both set.	ab
string	Letters rendered inside avatar based on given string like John Smith. The rendered result will be JS. It has also dash "-" sign handling.	-
size	In pixels. Size of the avatar.	60
rounded	Boolean attribute. true value make shape avatar rounded.	false
corner-radius	In pixels. Add rounded corners to avatar.	0
uppercase	Boolean attribute. true value make avatar text uppercased.	false
text-weight	Weight of the avatar text. Set as normal css font-weight property like: 100, 200, 300, etc.	700
text-scale	Scale of the avatar text.	1
text-color	Color of the avatar text.	#494949
text-length	Length of the avatar text.	null
background-color	Color of the avatar shape	#e2e2e2
border	In pixels. Border of the avatar shape.	0
border-color	Border color of the avatar shape. When border attribute is set, border-color gives its default value.	#494949
auto-color	Boolean attribute. true value gives random color to avatar shape.	false

Usage

Basic usage gives all default properties.

<avatar-initials></avatar-initials>

Selected attributes set.

<avatar-initials
  initials="AI"
  text-scale="1.5"
  text-weight="400"
  text-color="#2c3e50"
  rounded
  border="1"
  border-color="#2c3e50"
  background-color="#e67e22"
>
</avatar-initials>

Tests

Tests are written without any external libraries. Just open avatar-initials.test.html located in /tests directory with your favourite browser and see results!

Browser support

Web Components works in all majors browsers:

• Chrome
• Firefox
• Opera
• Safari

License

ISC License