Need private packages and team management tools?Check out npm Teams »

@twain/avatar

0.1.0-alpha.14 • Public • Published

@twain/avatar

A circular image representing one person

Usage

npm -i @twain/avatar

React

import Avatar from "@twain/avatar";
import "@twain/avatar.css";
 
<Avatar
  src="path/to/avatar.png"
  alt="some avatar"
  size={4}
  inset={true}
/>;

CSS

First, link the stylesheet, relative to your platform.

<span class="Avatar Avatar--size_4 Avatar--inset_true">
  <img src="path/to/avatar.png" alt="some avatar" />
</span>

Properties

size: string | number

Controls size in 8px increments.

values: 3, 4, 5, 6, 7, 8, 9, "20px", "profile"

inset: boolean

Insets the component

Theming with CSS Custom Properties

:root {
  --twain-avatar-inset-color: white;
}

Specification

Definition

An image representing one person.

Treatment

  • Shape: circle
  • Dimensions: height == width
  • Border: optional
    • excluded: 20px
    • size: .5 * (absolute-avatar-size / 8px) (rounded up for better browser support)
    • scale: _roundUp(size _ .05)*
    • min: 2px
    • max: 5px
    • position: inside
    • color: variable (default: white)

Size

Absolute height/width must be a multiple of 8px, with a single exception for 20px.

Applications may choose to implement a subset of standard sizes.

standard sizes:

  • 20px
  • 24px
  • 32px
  • 40px
  • 48px
  • 56px
  • 64px
  • 72px

Keywords

none

Install

npm i @twain/avatar

DownloadsWeekly Downloads

2

Version

0.1.0-alpha.14

License

MIT

Unpacked Size

31.5 kB

Total Files

10

Last publish

Collaborators

  • avatar