Custom-avatar-initials NPM

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

avatar initials custom-avatar-initials custom-element custom element web-components web components

@infinitebrahmanuniverse/nolb-custom-a @everything-registry/sub-chunk-1427

1.0.1

5 years ago

1.0.0

5 years ago