nuke-iconfont
Version:
iconfont
70 lines (61 loc) • 1.4 kB
Markdown
# Iconfont 使用 Demo
* order: 0
在 componentDidMount 生命周期加载 Iconfont , 可以使用 iconfont.cn 字库或自定义字库
---
```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import { MultiRow } from 'nuke-layout';
import Page from 'nuke-page';
import Iconfont, { formatUnicode } from 'nuke-iconfont';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
}
componentDidMount() {
Iconfont({
name: 'iconfont1',
url: 'https://at.alicdn.com/t/font_1474198576_7440977.ttf'
});
}
render() {
return (
<Page title="Iconfont">
<Text style={styles.icon1}>{formatUnicode('e60f')}</Text>
</Page>
);
}
};
const styles = {
wrap: {
backgroundColor: '#ffffff'
},
iconCell: {
paddingLeft: '40rem',
paddingRight: '40rem',
borderWidth: '1rem',
borderStyle: 'solid',
borderColor: '#dddddd',
marginLeft: '-1rem',
marginTop: '-1rem',
height: '220rem',
alignItems: 'center',
justifyContent: 'center'
},
icon1: {
fontFamily: 'iconfont1',
fontSize: '38rem',
marginBottom: '30rem',
color: '#3089DC'
},
iconCellText: {
fontSize: '20rem',
color: '#999999',
alignItems: 'center',
marginBottom: '40rem'
}
};
render(<App />);
```