Question

描述

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

安装

$ npm install rax-icon --save

属性

属性	类型	默认值	必填	描述	支持
source.uri	String	-	✔️	当 icon 是图片时，uri 是图片路径，优先级比 fontFamily 和 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 DriverUniversal from 'driver-universal';
import Icon, { createIconSet } from 'rax-icon';

const icon = 'https://gw.alicdn.com/tfs/TB1KRRuQXXXXXbwapXXXXXXXXXX-200-200.png';

function App() {
  return <Icon source={{uri: icon}}/>;
}

render(<App />, document.body, { driver: DriverUniversal });

codePoint 示例

import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import Icon, { createIconSet } from 'rax-icon';

function App() {
  return <Icon fontFamily="iconfont" source={{
    uri: 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf',
    codePoint: '\uE60f'}}/>;
}

render(<App />, document.body, { driver: DriverUniversal });

createIconSet 配合 codePoint 示例

import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import Icon, { createIconSet } from 'rax-icon';

const IconFont = createIconSet({}, 'iconfont', 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf');

function App() {
  return <IconFont codePoint={'\uE60f'}/>;
}

render(<App />, document.body, { driver: DriverUniversal });

createIconSet 别名示例

import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import Icon, { createIconSet } from 'rax-icon';

const IconFont = createIconSet({
  hello: '\uE60f'
}, 'iconfont', 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf');

function App() {
  return <IconFont name={'hello'}/>;
}

render(<App />, document.body, { driver: DriverUniversal });