weex-nuke/docs/icon/demo/style.md

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

# Icon Demos

- order: 1

通过注入主题尺寸，修改 Icon 的尺寸

---
```js
/** @jsx createElement */
import { View, Text, Icon, Layout, Page, ThemeProvider } from 'weex-nuke';
const { MultiRow } = Layout;
const { StyleProvider } = ThemeProvider;

<NukePlayGround>
  <StyleProvider style={smallerIcons}>
    <MultiRow dataSource={ICONS['v2']} rows={3} renderRow={this.renderGridCellV2} />
  </StyleProvider>
<NukePlayGround>
```
---

````js

import {createElement, Component,render } from 'rax';
const ICONS = {
    v2:["like","live","lock","mail","manage","message"]
}
let smallerIcons = {
    Core:{
        [`icon-m`]: 20,
    },
};
let largerIcons = {
    Core:{
        [`icon-m`]: 70,
    },
};
let App = class NukeDemoIndex extends Component {
    constructor() {
        super();

    }
    renderGridCellV2 = (item,index) => {
        return <View style={styles.iconCell}>
                <Icon version="v2" style={[styles.icon]} name={item} />
                <Text style={styles.iconShowCode}>{item}</Text>
            </View>
    }

    render() {
        return (
            <Page title="Icon">
                <Page.Intro main="变小"></Page.Intro>
                <View style={styles.lineWithMargin}>
                    <StyleProvider style={smallerIcons}>
                        <MultiRow dataSource={ICONS['v2']} rows={3} renderRow={this.renderGridCellV2} />
                    </StyleProvider>
                </View>
                <Page.Intro main="变大"></Page.Intro>
                <View style={styles.lineWithMargin}>
                    <StyleProvider style={largerIcons}>
                        <MultiRow dataSource={ICONS['v2']} rows={3} renderRow={this.renderGridCellV2} />
                    </StyleProvider>
                </View>
            </Page>

        );
    }
}
const styles={
    icon:{
        marginBottom:20,
    },
    iconCell:{
        justifyContent:'center',
        height:'180rem',
        alignItems:'center',
        borderWidth:'1rem',
        borderColor:'#eeeeee',
        borderStyle:'solid',
    },
    lineWithMargin:{
        marginLeft:'40rem',
        marginRight:'40rem',
        backgroundColor:'#ffffff'

    },

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