该模块已内置到框架中,可通过 Icon 标签引用
图标组件,实现了 W3C 标准的 IconFont 接口。
用 iconfont:
<Icon style={{width: 100, height: 100}} fontFamily="iconfont" source={{uri: '//at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf', codePoint: '\uE60f'}}/>
用图片:
<Icon style={{width: 100, height: 100}} source={{uri: icon}}/>
createIconSet 方式:
const IconFont = createIconSet({ hello: '\ue60f' }, 'iconfont', 'http://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf');
<IconFont name={'hello'}/>
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| source.uri | String | ’‘ | 图片型icon的url,如果出现,则font和codePoint两个属性失效 | | fontFamily | String | ’‘ | iconfont的字体 | | source.codePoint | String | ’’ |
iconfont的码点 |
参数说明
{ hello: '\ue60f' }'iconfont'IconComponent 属性说明
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| name | String | ’‘ | 字符的名称 | | codePoint | String | ’’ |
iconfont 的码点 |
// demo
import { createElement, render, Component } from 'rax';
const IconFont1 = createIconSet({}, 'iconfont', 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf');
const IconFont2 = createIconSet({
hello: '\uE60f'
}, 'iconfont', 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf');
const icon = 'https://gw.alicdn.com/tfs/TB1KRRuQXXXXXbwapXXXXXXXXXX-200-200.png';
class Demo extends Component {
render() {
return (
<View>
<Icon source={{uri: icon}}/>
<Icon fontFamily="iconfont" source={{uri: 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf', codePoint: '\uE60f'}}/>
<IconFont1 codePoint={'\uE60f'}/>
<IconFont2 name={'hello'}/>
</View>
);
}
}
render(<Demo />);