Iconfont iconfont字体
API#
- 设置iconfont，以便于方便灵活地使用webfont 作为icon
Iconfont#
Iconfont(options))
options#
- options.name : iconfont名称，例如 'icon1'
- options.url : iconfont路径，例如 'http://at.alicdn.com/t/font_1474198576_7440977.ttf'
代码演示
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,ScrollView} from 'nuke-components';
import {MultiRow} from 'nuke-grid';
import { Button, Modal,Iconfont } from 'nuke';
import {mount} from 'nuke-mounter';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
Iconfont({name:"iconfont1",url:"http://at.alicdn.com/t/font_1474198576_7440977.ttf"});
this.state={
gridData:[
{"icon":"\ue60f","name":"直播"},
{"icon":"\ue608","name":"消息"},
{"icon":"\ue606","name":"浏览"},
{"icon":"\ue600","name":"时间"},
{"icon":"\ue605","name":"圆点"},
{"icon":"\ue607","name":"感叹号"},
{"icon":"\ue603","name":"上"},
{"icon":"\ue604","name":"下"}
]
};
}
getContent(item){
let body=[];
this.state.gridData.forEach((item)=>{
body.push(<View style={style.iconCell}>
<Text style={style.icon1}>{item.icon}</Text>
<Text style={style.iconCellText}>{item.name}</Text>
</View>
);
})
return body;
}
render() {
return (
<ScrollView>
{this.getContent()}
</ScrollView>
);
}
}
const style={
iconCell:{
paddingLeft:'40rem',
paddingRight:'40rem'
},
icon1:{
fontFamily: 'iconfont1',
fontSize: '36rem',
marginBottom:'40rem',
color:'blue',
alignItems:'center'
},
iconCellText:{
fontSize: '20rem',
color:'#999999',
alignItems:'center'
},
}
mount(<App/>, mountNode);
