Angular Avatar Component

Angular Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.

  ```scss
  --cui-avatar-width: #{$avatar-width};
  --cui-avatar-height: #{$avatar-height};
  --cui-avatar-font-size: #{$avatar-font-size};
  --cui-avatar-border-radius: #{$avatar-border-radius};
  --cui-avatar-status-width: #{$avatar-status-width};
  --cui-avatar-status-height: #{$avatar-status-height};
  --cui-avatar-status-border-radius: #{$avatar-status-border-radius};
  ```
  

  ```ts
  const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': "red"
  }
  ```

  ```html
  <div [ngStyle]="vars"></div>
  ```

  ```scss
  $avatar-width:                 2rem;
  $avatar-height:                2rem;
  $avatar-font-size:             .8rem;
  $avatar-border-radius:         50em;
  $avatar-status-width:          .5rem;
  $avatar-status-height:         .5rem;
  $avatar-status-border-radius:  50em;
  $avatar-transition:            margin .15s;

  $avatar-sizes: (
    sm: (
      width: 1.5rem,
      height: 1.5rem,
      font-size: .6rem,
      status-width: .4rem,
      status-height: .4rem
    ),
    md: (
      width: 2.5rem,
      height: 2.5rem,
      font-size: 1rem,
      status-width: .7rem,
      status-height: .7rem
    ),
    lg: (
      width: 3rem,
      height: 3rem,
      font-size: 1.2rem,
      status-width: .8rem,
      status-height: .8rem
    ),
    xl: (
      width: 4rem,
      height: 4rem,
      font-size: 1.6rem,
      status-width: 1rem,
      status-height: 1rem
    ),
  );
  ```