# Avatar

头像

表示用户、事物，支持图片、文字等

## 案例演示

案例中部分图标，采用 [randomuser](https://randomuser.me/) 生成数据。

### Avatar 基本使用

---demo
```js
import { Avatar } from 'amos-framework';

ReactDOM.render((
<div>
  <Avatar size={64} icon="user" />
  <Avatar size="lg" icon="user" />
  <Avatar icon="user" />
  <Avatar size="sm" icon="user" />
  <Avatar useInnerIcon size="sm" icon="collection" />
</div>
), _react_runner_);
```
---demoend

### Avatar 形状 square

---demo
```js
import { Avatar } from 'amos-framework';

ReactDOM.render((
<div>
  <Avatar shape="square" size={64} icon="user" />
  <Avatar shape="square" size="lg" icon="user" />
  <Avatar shape="square" size="lg" icon="https://randomuser.me/api/portraits/lego/3.jpg" />
  <Avatar shape="square" size="lg" src="https://randomuser.me/api/portraits/lego/3.jpg" />
  <Avatar shape="square" icon="user" />
  <Avatar shape="square" size="sm" icon="user" />
</div>
), _react_runner_);
```
---demoend

### Avatar 徽标图像 带徽标的头像

---demo
```js
import { Avatar } from 'amos-framework';

ReactDOM.render((
<div>
  <span style={{ marginRight: 24 }}>
    <Badge count={1}>
      <Avatar shape="square" icon="user" />
    </Badge>
  </span>
  <span>
    <Badge dot>
      <Avatar shape="square" icon="user" />
    </Badge>
  </span>
</div>
), _react_runner_);
```
---demoend

### Avatar 类型

支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。

---demo
```js
import { Avatar } from 'amos-framework';

ReactDOM.render((
<div>
  <Avatar icon="user" />
  <Avatar>U</Avatar>
  <Avatar>USER</Avatar>
  <Avatar src="https://randomuser.me/api/portraits/women/74.jpg" />
  <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
  <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>
), _react_runner_);
```
---demoend

### Avatar 自动调整字符大小

对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。

---demo
```js
import { Avatar } from 'amos-framework';


const UserList = ['R', 'Even', 'Cat', '张三', '不三不四'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];

class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      user: UserList[0],
      color: colorList[0]
    };
  }

  changeUser = () => {
    const index = UserList.indexOf(this.state.user);
    this.setState({
      user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
      color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
    });
  };

  render() {
    return (
      <div>
        <Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="lg">
          {this.state.user}
        </Avatar>
        <Button size="sm" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={this.changeUser}>
          Change
        </Button>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## Props

| params | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-avatar` | 自定义样式前缀 |
| className | string | - | 自定义样式名 |
| children | ReactNode | - | 自定义内容 |
| icon | `string or ReactNode` | - | 设置头像的图标类型，参考 `Icon`， amos-icon 库 组件 |
| useInnerIcon | boolean | - | 当 icon 为 string 时，设置为 true，则采用内置的 icon 库 |
| shape | string | `circle` | 指定头像的形状, 可选值 'circle', 'square' |
| size | string or number | `default` | 设置头像的大小, 可选值 'large', 'small', 'default', 或者为具体的数值（单位 px） |
| src | string | - | 图片类头像的资源地址 |
| alt | string | - | 图像无法显示时的替代文本 |
| onError | `() => boolean` | - | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 |