History

Dan 2aba876807 feat: support copy relative path from link files (#4367 ) * feat: support copy relative path from link files * chore: add @opensumi/ide-utils dependency * chore: reorder @opensumi/ide-utils dependency * chore: update test coverage exclusions for notebook module * fix: handle leading separators in TreeNode paths and use fsPath for URIs		2025-02-17 14:08:54 +08:00
..
__tests__/recycle-tree	Revert "feat: optimize tree performance" (#3783 )	2024-06-17 14:31:42 +08:00
src	feat: support copy relative path from link files (#4367 )	2025-02-17 14:08:54 +08:00
README.md	chore: remove deprecated usage of less expression (#2906 )	2023-07-18 19:45:45 +08:00
package.json	v3.7.0	2025-01-03 09:09:57 +00:00
webpack.config.js	fix: components css-loader hash (#3672 )	2024-05-14 19:53:05 +08:00

README.md

@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>
);

在 OpenSumi 中可通过 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 包的定位是直接能对外使用，不限定于在 OpenSumi 运行环境的组件
因此需要注意的是，放到这里的组件应该是纯组件
- 不包含对 OpenSumi runtime 依赖
- 不包含对 OpenSumi 其他包的依赖
- 自己的依赖自己管理
脱离 OpenSumi 去单独使用 @opensumi/ide-components 时，应手动 import 字体文件
```
@import '@opensumi/ide-components/lib/icon/iconfont/iconfont.css';
```