Avatar

The avatar component allows you to make an avatar style with ease.

Installation

npm install @fylgja/avatar

Then include the component in to your code via;

@use "@fylgja/avatar";
// Or via PostCSS import
@import "@fylgja/avatar";

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/avatar" with ($avatar-layer: "components");
// Or via PostCSS and other options as native CSS
@import "@fylgja/avatar" layer(components);

How to use

To use the avatar create element with the class .avatar.

<img class="avatar" style="--avatar-size: 6em; --avatar-bg: #8a4d19;" src="https://placekitten.com/120/120?img=1" width="120" height="120">
<img class="avatar" src="https://placekitten.com/60/60?img=2" width="60" height="60">

Avatars are by default round and are 3em big, allowing to scale with your text.

You can change this via the CSS variables or via the SCSS variables, if it is your default style.

Config

As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles, here are the following SCSS variables can you modify.

$avatar-size: 3em !default;
$avatar-radius: 50% !default;
$avatar-bg: #eee !default;
$avatar-color: null !default;