jQuery Text Avatar (include vanillajs version)

Let user name become a simple text avatar

Demo

Usage

For older version check here

npm i jquery.textavatar

Load textavatar.css or just merge to your css file.

jQuery

<div class='textavatar' style='width: 140px;' data-name='NAME INSIDE'></div>
<script src="jquery.textavatar.js"></script>

$('.textavatar').textAvatar()

Auto Create

<div class='textavatar' style='width: 140px;' data-name="NAME INSIDE" data-toggle="textavatar"></div>

Options

There is only width and name now.

$('DIV-NAME').textAvatar({
    width: 120, //no need to type 'px'
    name: NAME HERE
})

VanillaJS

<div class='textavatar' style='width: 140px;' data-name='NAME INSIDE'></div>

For es6 module

import textAvatar from 'textavatar.js'
textAvatar(document.querySelector('.textavatar'))

For normal usage

<script src="textavatar.iife.js"></script>

Auto Create

<div class='textavatar' style='width: 140px;' data-name="NAME INSIDE" data-toggle="textavatar"></div>

Options

There is only width and name now.

textAvatar(document.querySelector('DIV-NAME'), {
    width: 120, //no need to type 'px'
    name: NAME HERE
})

MIT License