feat: improve icon component

packages/client/src/components/index.ts

@@ -1 +0,0 @@
-export * from './icon';

packages/client/src/icon/Icon.tsx

@@ -1,10 +1,8 @@
 import * as antIcons from '@ant-design/icons';
-import { createFromIconfontCN } from '@ant-design/icons';
+import AntdIcon, { createFromIconfontCN } from '@ant-design/icons';
 import React from 'react';
 
-export const IconFont = createFromIconfontCN({
+let IconFont: any;
-  scriptUrl: ['//at.alicdn.com/t/font_2261954_u9jzwc44ug.js'],
-});
 
 export const icons = new Map<string, any>();
 
@@ -33,19 +31,31 @@ Object.keys(antIcons).forEach((name) => {
 
 interface IconProps {
   type: string;
+  component?: any;
   [key: string]: any;
 }
 
-export function Icon(props: IconProps) {
+export const Icon = (props: IconProps) => {
-  const { type = '', ...restProps } = props;
+  const { type = '', component, ...restProps } = props;
+  if (component) {
+    return <AntdIcon component={component} {...restProps} />;
+  }
   if (type && icons.has(type.toLowerCase())) {
     const IconComponent = icons.get(type.toLowerCase());
-    if (IconComponent === IconFont) {
-      return <IconFont type={type} />;
-    }
     return <IconComponent {...restProps} />;
   }
-  return null;
+  if (type && IconFont) {
+    return <IconFont type={type} />;
   }
+  return null;
+};
+
+Icon.createFromIconfontCN = (options) => {
+  IconFont = createFromIconfontCN(options);
+};
+
+Icon.register = (icons?: any) => {
+  registerIcons(icons);
+};
 
 export default Icon;

packages/client/src/icon/index.md

@@ -0,0 +1,76 @@
+---
+nav:
+  path: /client
+group:
+  path: /client
+---
+
+# Icon
+
+```tsx | pure
+import { Icon } from '@nocobase/client';
+
+Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+});
+
+<Icon type="BookOutlined" />
+```
+
+## Examples
+
+Use @ant-design/icons
+
+```tsx
+import React from 'react';
+import { Icon } from '@nocobase/client';
+
+export default () => <Icon type="BookOutlined" />
+```
+
+Use iconfont.cn
+
+```tsx
+import React from 'react';
+import { Icon } from '@nocobase/client';
+
+Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+});
+
+export default () => <Icon type="icon-tuichu" />
+```
+
+Custom Icon
+
+```tsx
+import React from 'react';
+import { Icon } from '@nocobase/client';
+
+const HeartSvg = () => (
+  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
+    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
+  </svg>
+);
+
+export default () => <Icon component={HeartSvg} />
+```
+
+Register Icon
+
+```tsx
+import React from 'react';
+import { Icon } from '@nocobase/client';
+
+const HeartSvg = () => (
+  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
+    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
+  </svg>
+);
+
+const CustomIcon = (props) => <Icon component={HeartSvg} {...props} />;
+
+Icon.register({ CustomIcon });
+
+export default () => <Icon type={'CustomIcon'} />
+```

packages/client/src/index.tsx

@@ -1,17 +1,19 @@
 import debug from 'debug';
 debug.log = console.log.bind(console);
 
-export * from './i18n';
 export * from './acl';
 export * from './antd-config-provider';
 export * from './api-client';
+export * from './application';
+export * from './async-data-provider';
 export * from './collection-manager';
 export * from './current-user';
 export * from './document-title';
+export * from './i18n';
+export * from './icon';
+export * from './plugin-manager';
+export * from './record-provider';
 export * from './route-switch';
 export * from './schema-component';
 export * from './system-settings';
-export * from './application';
+
-export * from './record-provider';
-export * from './async-data-provider';
-export * from './plugin-manager';

packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx

@@ -4,7 +4,7 @@ import { isValid } from '@formily/shared';
 import { Button, Input, Popover } from 'antd';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { hasIcon, Icon, icons } from '../../../components/icon';
+import { hasIcon, Icon, icons } from '../../../icon';
 
 function IconField(props: any) {
   const { value, onChange } = props;

packages/client/src/schema-component/antd/icon-picker/index.md

@@ -9,6 +9,6 @@ group:
 
 ## Examples
 
-### IconPicker usage
+### IconPicker
 
 <code src="./demos/demo1.tsx" />

packages/client/src/schema-component/antd/index.ts

@@ -14,3 +14,4 @@ export * from './menu';
 export * from './page';
 export * from './password';
 export * from './radio';
+

packages/client/src/schema-component/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useAttach';
 export * from './useCompile';
 export * from './useDesignable';
 export * from './useFieldProps';
+

packages/client/src/schema-component/index.tsx

@@ -1,5 +1,6 @@
+export * from './antd';
 export * from './components';
 export * from './context';
 export * from './hooks';
 export * from './types';
-export * from './antd';
+