rax-icon v1.4.5

rax-icon

支持

Web / Weex / 阿里小程序 / 微信小程序

描述

图标组件，实现了 W3C 标准的 IconFont 接口。

安装

$ npm install rax-icon --save

属性

1. 小程序存在两种构建模式：编译时和运行时。如无说明，该属性支持小程序即指两种构建模式均支持
2. 如果没有传入 fontFamily 和 codePoint，但传入了 source.uri，则 source.uri 会被认为是图片型 icon 的 url，否则 source.uri 会被认为是 iconfont 的 url。

方法

IconComponent createIconSet(Object map, String name, String url);

支持

(小程序编译时模式不支持)

参数

返回

示例

import { createElement, render, Component } from 'rax';
import DriverUniversal 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: DriverUniversal });