该模块已内置到框架中,可通过 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 />);