$ npm install rax-icon
图标组件,实现了 W3C 标准的 IconFont 接口。
$ npm install rax-icon --save
1、支持列表中的 代表h5 代表weex 代表小程序 微信小程序 代表快应用 2. 小程序存在两种构建模式:编译时和运行时。如无说明,该属性支持小程序即指两种构建模式均支持
属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
---|---|---|---|---|---|
source.uri | String |
- | 是 | 图片型icon的url,如果出现,则font和codePoint两个属性失效 | |
fontFamily | String |
- | 是 | iconfont的字体 | |
source.codePoint | String |
- | 是 | iconfont的码点 |
IconComponent createIconSet(Object map, String name, String url);
(小程序编译时模式不支持)
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
map | Object |
- | 是 | 描述字符集映射,eg:{ hello: '\ue60f' } |
name | String |
- | 是 | 字体名称 |
url | String |
- | 是 | 字体文件的 URL |
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
name | String |
- | 否 | 字符的名称 |
codePoint | String |
- | 否 | iconfont 的码点 |
import { createElement, render, Component } from 'rax';
import DU from 'driver-universal';
import View from 'rax-view';
import Icon, { createIconSet } from '../src/index';
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 />, document.body, { driver: DU });
© 2010 - cnpmjs.org x YWFE | Home | YWFE