# Icon Demos

* order: 0

可以使用图片 或 iconfont

---

```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 { MultiRow } from 'nuke-layout';
import Page from 'nuke-page';
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: '180rem',
    alignItems: 'center',
    borderWidth: '1rem',
    borderColor: '#eeeeee',
    borderStyle: 'solid'
  },
  new: {
    fontSize: 68,

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

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