# Icon

内置 icon 图标，同 `amos-icon` 组件

内部 icon 默认设置 font-family: `aficon`.

> since v 1.7.1 版本，icon 的默认颜色由全局变量 `--aficon-color` 设置。内部传入 `color` props，将会在其 `style` 中设置该变量。

## 自定义图标规范

font-family 后缀必须以 `icon` 结尾，如 `aficon`，`amosicon`，`xxicon` 等

## 说明

可通过 使用 style 和 className 设置图标的大小和颜色。

```js
import { Icon } from 'amos-framework';

<Icon icon="user" style={{ fontSize: 16, color: '#08c' }} />
```

## 案例演示

本案例，默认注入数据 `styles、icons、animIcons`

```js
const styles = {
  list: {
    margin: '40px 0',
    listStyle: 'none',
    overflow: 'hidden'
  },
  item: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    float: 'left',
    width: '10%',
    cursor: 'pointer',
    height: '100px',
    transition: 'color 0.3s ease-in-out, background-color 0.3s ease-in-out, scale 0.3s ease-in-out',
    margin: '5px',
    borderRadius: '4px'
  },
  tip: {
    marginTop: '2em',
    textAlign: 'center'
  }
};

const icons = ['left', 'right', 'down', 'up', ... ];
const animIcons = ['loading', 'loading-star', 'check-circle', 'star', 'cancel', ... ];
```

### 基本使用

---demo
```js
import { CardPane, Icon, CopyToClipboard, message } from 'amos-framework';

class Demo extends Component {
  handleCopy = (copyText) => {
    CopyToClipboard.doCopy(copyText, (isCopy) => {
      console.log('copy result:', isCopy, copyText);
      if (isCopy){
        message.success('复制成功!');
      }
    });
  }

  renderIconItem = (iconItem, animated) => {
    return (
      <li
        key={iconItem}
        style={styles.item}
        className="inner-icon-item"
        onClick={() => this.handleCopy(iconItem)}
        title="单击复制icon值"
      >
        <Icon icon={iconItem} animated={animated} />
        <span style={styles.tip}>{iconItem}</span>
      </li>
    );
  };

  render() {
    const title = `内置Icon 图标总数：${icons.length}`;
    return (
      <CardPane title={title} noBorder style={{ width: '100%' }}>
        <ul style={styles.list}>{icons.map(i => this.renderIconItem(i))}</ul>
      </CardPane>
    );
  }
}

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

### 启用默认动画

---demo
```js
import { CardPane, Icon, CopyToClipboard, message } from 'amos-framework';

class Demo extends Component {
  handleCopy = (copyText) => {
    CopyToClipboard.doCopy(copyText, (isCopy) => {
      console.log('copy result:', isCopy, copyText);
      if (isCopy){
        message.success('复制成功!');
      }
    });
  }

  renderIconItem = (iconItem, animated) => {
    return (
      <li
        key={iconItem}
        style={styles.item}
        className="inner-icon-item"
        onClick={() => this.handleCopy(iconItem)}
        title="单击复制icon值"
      >
        <Icon icon={iconItem} animated={animated} />
        <span style={styles.tip}>{iconItem}</span>
      </li>
    );
  };

  render() {
    return (
      <CardPane title={`启用默认动画: <Icon icon="loading" animated />`} noBorder style={{ width: '100%' }}>
        <ul style={styles.list}>{animIcons.map(i => this.renderIconItem(i, true))}</ul>
      </CardPane>
    );
  }
}

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

> 注意，当 Icon 组件的父组件元素无法将 Icon 组件改变为块级盒时，animated 有可能会失效，此时可以设置父组件为 `flex` or `inline-flex`，
> 原因：默认动画采用 `transform: rotate(0deg);` 实现动画，该属性只能转换由盒模型定位的元素，此时也可以设置 `<Icon style={{ display: 'inline-block' }}>` 实现。如：

```js
// 动画有可能会失效
<span><Icon icon="loading" animated /></span>
// 动画正常
<span style={{ display: 'flex' }}><Icon icon="loading" animated /></span>
// 动画正常
<span><Icon style={{ display: 'inline-block' }} icon="loading" animated /></span>
```

参考： [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)

## props

|name|type|default| description|
|-----|---|--------|----|
|prefix | string | `aficon`| icon前缀 |
|icon | string | - | 支持 icon名称，图片路径，base64 image，`jpe?g|png|gif|bmp|ico|tga` 格式 |
|spin | boolean | false | 是否旋转 |
|size | `number or string` | - | 图标尺寸，可选值为 `[lg、2x、3x、4x、5x]`,或者为 lg 数字 2-5 |
|font | string | - | 指定font-family 会覆盖style中设置的font-family |
|color | string | - | ~~`指定color 会覆盖 style 中设置的color`~~，`since v 1.7.1` 及 之后的版本，color属性将设置为 `--aficon-color`，用于覆盖全局变量 |
|style | object | -| 样式，fontSize、color等等 |
|children | `HtmlElement or string` | - | 包裹内容,可选 |
|animated | boolean | - | 启用内置动画 |
|other | html property | - | html元素自身属性,如点击事件onClick等 |

> 注意，所有使用到的 `Icon` 组件，均支持 `icon` 字段为 icon名称、图片路径、base64 Image。