LetterAvatar: Using HTML + CSS to generate it

[aripddev]

Why do we generate an image here? Isn't is easier to generate HTML + CSS? This would also allow customization.

Originally posted by @jepsar in https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/726#issuecomment-541440958

[aripddev]

Hi @jepsar , Is it what you think?

    <style>
        :root {
            --avatar-size: 3rem;
            /* change this value anything, e.g., 100px, 10rem, etc. */
            --avatar-color: #fff;
            --avatar-background-color: #f00;
        }

        .circle {
            color: var(--avatar-color);
            background-color: var(--avatar-background-color);
            border-radius: 50%;
            height: var(--avatar-size);
            text-align: center;
            width: var(--avatar-size);
        }

        .initials {
            font-size: calc(var(--avatar-size) / 2);
            /* 50% of parent */
            line-height: 1;
            position: relative;
            top: calc(var(--avatar-size) / 4);
            /* 25% of parent */
        }
    </style>

    <div class="circle">
        <span class="initials">MS</span>
    </div>

[melloware]

Does this work in IE11? Not that I care that much about IE anymore but check what browsers it works in. I am all for no image.

[aripddev]

@melloware Do you think that whether it is a good idea to put styles inside <div style="..." or use css and js? Any performance issue for large data listing?

[melloware]

i don't think the performance impact will be bad either way. I prefer to have as much CSS inside the .css file and just reference classes than use inline styles. Just my preference because the CSS file can be cached by the browser where inline styles need to be rendered every time.

[melloware]

Fixed with commit: https://github.com/primefaces-extensions/core/commit/183a4cf7756307f125f292df03ce9097f6d55d7a