# @beisen-phoenix/avatar

> > @beisen-phoenix/avatar

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/avatar
pnpm add @beisen-phoenix/avatar
yarn add @beisen-phoenix/avatar
bun add @beisen-phoenix/avatar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-03-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/avatar
- npm.io page: https://npm.io/package/@beisen-phoenix/avatar

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md)
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 329 more at https://npm.io/package/@beisen-phoenix/avatar/versions

## README

# 头像组件

> @beisen-phoenix/avatar

## 概述

> 提供不同尺寸的头像规范，在保持一致性原则的前提下满足不同场景的需求
> 
> 头像展示运用在系统用户登陆、个人主页、联系方式页面等

## API
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- | --- | --- |
| size | 头像尺寸 | Size | Size.lg | 否 | 
| children | 头像里的文字 | string | | 否 |
| src | 头像里的图片地址 | string | -- | 否 |
| bgColor | 指定背景色，优先级高于userId | string | -- | 否 |
| userId | 用户id，根据用户id的最后一位配置颜色 | string|number | -- | 否 |
| extraCls | 用户自定义className | string | -- | 否 |

## 数据格式

```ts
enum Size {
  xxsm = 'xxsm',
  xsm = 'xsm',
  sm = 'sm',
  lg = 'lg',
  xlg = 'xlg',
  xxlg = 'xxlg'
}
```

## demo

```ts
import React from 'react';
import Avatar, {Size} from '../../src';

export default function App() {
  return (
    <>
      <div>
        <h3>中文名字</h3>
        <Avatar userId="13341">司徒二柱</Avatar>
        <Avatar size={Size.sm} userId="13343">司马建国
        <Avatar size={Size.xxlg} userId="13345">伟大的国明哥一统江湖</Avatar>
        <Avatar size={Size.xsm} userId="13347">南宫无脑</Avatar>
        <Avatar size={Size.xxsm}>小杨同学</Avatar>
        <Avatar size={Size.xlg}>这个名字取的长啊</Avatar>
      </div>
      <div>
        <h3>英文名字</h3>
        <Avatar userId="13341">Raymond Li</Avatar>
        <Avatar size={Size.sm} userId="13343">Donald Trump</Avatar>
        <Avatar size={Size.xxlg} userId="13345">Steve Junior Job</Avatar>
        <Avatar size={Size.xsm} userId="13347">Bill Gates</Avatar>
        <Avatar size={Size.xxsm}>Macheal Jackson</Avatar>
        <Avatar size={Size.xlg}>Bruce Lee</Avatar>
      </div>
    </>
  );
}

```

---
_Source: https://npm.io/package/@beisen-phoenix/avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._