Icon
优质
小牛编辑
135浏览
2023-12-01
描述
图标组件,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 });