weex-nuke/src/node_modules/nuke-icon/docs/basic.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Icon 可以使用图片 或 iconfont

- order: 0
- title_en: Icon can use picture or iconfont source.

---

```js
<NukePlayGround>
  // 图片
  <Icon
    style={styles.icon}
    src="https://img.alicdn.com/tfs/TB1vUv.JFXXXXbAXFXXXXXXXXXX-50-50.png"
  />

  // iconfont
  <MultiRow
    dataSource={ICONS}
    rows={5}
    renderRow={this.renderGridCell}
  />
<NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Icon from 'nuke-icon';
import Layout from 'nuke-layout';
import Page from 'nuke-page';
const { MultiRow } = Layout;
const ICONS = [
  'right',
  'download',
  'accessory',
  'add',
  'minus',
  'camera',
  'close',
  'enter',
  'feedback-fill',
  'feedback',
  'homepage-fill',
  'homepage',
  'message-fill',
  'message',
  'picture',
  'info-fill',
  'info',
  'return',
  'scan',
  'setup-fill',
  'setup',
  'share',
  'success-fill',
  'success',
  'switch',
  'prompt',
  'tailor',
  'video',
  'warning-fill',
  'warning',
  'search',
  'packup',
  'unfold',
  'delete',
  'delete-fill'
];
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  renderGridCell = (item, index) => {
    return (
      <View style={styles.iconCell}>
        <Icon fixedFont={true} style={styles.icon} name={item} />
        <Text style={styles.iconShowCode}>{item}</Text>
      </View>
    );
  };

  render() {
    return (
      <Page title="Icon">
        <View style={styles.listLine}>
          <Icon style={styles.icon} src="https://img.alicdn.com/tfs/TB1vUv.JFXXXXbAXFXXXXXXXXXX-50-50.png" />
          <View>
            <Text>一行文字 </Text>
          </View>
        </View>
        <Page.Intro main="自带的 iconfont 集合" />
        <View style={styles.lineWithMargin}>
          <MultiRow dataSource={ICONS} rows={5} renderRow={this.renderGridCell} />
        </View>
      </Page>
    );
  }
};
const styles = {
  icon: {
    fontSize: 40,
    marginBottom: 20
  },
  iconCell: {
    justifyContent: 'center',
    height: 180,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#eeeeee',
    borderStyle: 'solid'
  },
  new: {
    fontSize: 68,

    color: '#3089dc'
  },
  listLine: {
    marginLeft: 40,
    marginRight: 40,
    padding: 20,
    flexDirection: 'row',
    backgroundColor: '#ffffff'
  },
  lineWithMargin: {
    marginLeft: 40,
    marginRight: 40,
    backgroundColor: '#ffffff'
  },

  iconShowCode: {
    fontSize: 24,
    color: '#999999'
  }
};
render(<App />);
```