From 091fb7f5ee89e601161c66b9b733f296b539872c Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 20 Jan 2022 18:19:59 +0800 Subject: [PATCH] feat: improve icon component --- packages/client/src/components/index.ts | 1 - .../client/src/{components => }/icon/Icon.tsx | 30 +++++--- packages/client/src/icon/index.md | 76 +++++++++++++++++++ .../client/src/{components => }/icon/index.ts | 0 packages/client/src/index.tsx | 12 +-- .../antd/icon-picker/IconPicker.tsx | 2 +- .../antd/icon-picker/index.md | 2 +- .../client/src/schema-component/antd/index.ts | 1 + .../src/schema-component/hooks/index.ts | 1 + .../client/src/schema-component/index.tsx | 3 +- 10 files changed, 109 insertions(+), 19 deletions(-) delete mode 100644 packages/client/src/components/index.ts rename packages/client/src/{components => }/icon/Icon.tsx (62%) create mode 100644 packages/client/src/icon/index.md rename packages/client/src/{components => }/icon/index.ts (100%) diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts deleted file mode 100644 index af77d84ef..000000000 --- a/packages/client/src/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './icon'; diff --git a/packages/client/src/components/icon/Icon.tsx b/packages/client/src/icon/Icon.tsx similarity index 62% rename from packages/client/src/components/icon/Icon.tsx rename to packages/client/src/icon/Icon.tsx index 012eec51e..8b9a226e7 100644 --- a/packages/client/src/components/icon/Icon.tsx +++ b/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({ - scriptUrl: ['//at.alicdn.com/t/font_2261954_u9jzwc44ug.js'], -}); +let IconFont: any; export const icons = new Map(); @@ -33,19 +31,31 @@ Object.keys(antIcons).forEach((name) => { interface IconProps { type: string; + component?: any; [key: string]: any; } -export function Icon(props: IconProps) { - const { type = '', ...restProps } = props; +export const Icon = (props: IconProps) => { + const { type = '', component, ...restProps } = props; + if (component) { + return ; + } if (type && icons.has(type.toLowerCase())) { const IconComponent = icons.get(type.toLowerCase()); - if (IconComponent === IconFont) { - return ; - } return ; } + if (type && IconFont) { + return ; + } return null; -} +}; + +Icon.createFromIconfontCN = (options) => { + IconFont = createFromIconfontCN(options); +}; + +Icon.register = (icons?: any) => { + registerIcons(icons); +}; export default Icon; diff --git a/packages/client/src/icon/index.md b/packages/client/src/icon/index.md new file mode 100644 index 000000000..e41fd250a --- /dev/null +++ b/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', +}); + + +``` + +## Examples + +Use @ant-design/icons + +```tsx +import React from 'react'; +import { Icon } from '@nocobase/client'; + +export default () => +``` + +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 () => +``` + +Custom Icon + +```tsx +import React from 'react'; +import { Icon } from '@nocobase/client'; + +const HeartSvg = () => ( + + + +); + +export default () => +``` + +Register Icon + +```tsx +import React from 'react'; +import { Icon } from '@nocobase/client'; + +const HeartSvg = () => ( + + + +); + +const CustomIcon = (props) => ; + +Icon.register({ CustomIcon }); + +export default () => +``` diff --git a/packages/client/src/components/icon/index.ts b/packages/client/src/icon/index.ts similarity index 100% rename from packages/client/src/components/icon/index.ts rename to packages/client/src/icon/index.ts diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx index e85c14eb3..b4229b262 100644 --- a/packages/client/src/index.tsx +++ b/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'; + diff --git a/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx index 1a79c7df4..9dce3bff0 100644 --- a/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx +++ b/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; diff --git a/packages/client/src/schema-component/antd/icon-picker/index.md b/packages/client/src/schema-component/antd/icon-picker/index.md index 39ff77661..53c495839 100644 --- a/packages/client/src/schema-component/antd/icon-picker/index.md +++ b/packages/client/src/schema-component/antd/icon-picker/index.md @@ -9,6 +9,6 @@ group: ## Examples -### IconPicker usage +### IconPicker diff --git a/packages/client/src/schema-component/antd/index.ts b/packages/client/src/schema-component/antd/index.ts index f69926756..c1b5b8afa 100644 --- a/packages/client/src/schema-component/antd/index.ts +++ b/packages/client/src/schema-component/antd/index.ts @@ -14,3 +14,4 @@ export * from './menu'; export * from './page'; export * from './password'; export * from './radio'; + diff --git a/packages/client/src/schema-component/hooks/index.ts b/packages/client/src/schema-component/hooks/index.ts index e7ced022f..d377e5aa7 100644 --- a/packages/client/src/schema-component/hooks/index.ts +++ b/packages/client/src/schema-component/hooks/index.ts @@ -2,3 +2,4 @@ export * from './useAttach'; export * from './useCompile'; export * from './useDesignable'; export * from './useFieldProps'; + diff --git a/packages/client/src/schema-component/index.tsx b/packages/client/src/schema-component/index.tsx index 227564084..2e731983a 100644 --- a/packages/client/src/schema-component/index.tsx +++ b/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'; +