README
@opensumi/ide-components
Usage
Icon/createFromIconfontCN
import React from 'react';
import { createFromIconfontCN } from '@opensumi/ide-components/lib/icon/iconfont-cn';
import { Icon } from '@opensumi/ide-components/lib/icon';
type IconFontMap =
'icon-javascript'
| 'icon-java'
| 'icon-shoppingcart'
| 'icon-python';
const IconFont = createFromIconfontCN<IconFontMap>({
scriptUrl: [
'//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
'//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
],
});
export const Sample = () => (
<div className='icons-list'>
<IconFont size='large' icon='icon-javascript' />
<IconFont icon='icon-java' onClick={() => console.log('icon java clicked')} />
<IconFont loading icon='icon-shoppingcart' />
<IconFont disabled size='large' icon='icon-python' />
<Icon icon='explorer' />
{/* <Icon icon='fanhui' /> */}
<Icon icon='shangchuan' />
</div>
);
在 ide-framework 中可通过 appConfig 传入新 Icon/覆盖已存在的 Icon
renderApp({
// ...
iconStyleSheets: [
{
iconMap: {
explorer: 'fanhui', // 这种是覆盖,因此在 Icon 中通过 `explorer` 去取
shangchuan: 'shangchuan', // 这种是新增,因此在 Icon 中通过 `shangchuan` 去取
},
prefix: 'tbe tbe-',
cssPath: '//at.alicdn.com/t/font_403404_1qiu0eed62f.css',
},
],
});
Attention
components 包的定位是直接能对外使用,不限定于在 ide-framework 运行环境的组件
因此需要注意的是,放到这里的组件应该是纯组件
- 不包含对 ide-framework runtime 依赖
- 不包含对 ide-framework 其他包的依赖
- 自己的依赖自己管理
脱离 ide-fw 去单独使用
@opensumi/ide-components
时,应手动 import 字体文件@import '~@opensumi/ide-components/lib/icon/iconfont/iconfont.css';