diff --git a/packages/app/src/components/form.fields/icons/index.tsx b/packages/app/src/components/form.fields/icons/index.tsx
new file mode 100644
index 000000000..750f4dd3c
--- /dev/null
+++ b/packages/app/src/components/form.fields/icons/index.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { connect } from '@formily/react-schema-renderer'
+import { Popover, Button } from 'antd'
+import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared'
+import { icons, hasIcon, Icon as IconComponent } from '@/components/icons';
+
+function IconField(props: any) {
+ const { value, onChange } = props;
+ const [visible, setVisible] = useState(false);
+ return (
+
+
{
+ setVisible(val)
+ }} content={(
+
+ {[...icons.keys()].map(key => (
+ {
+ onChange(key);
+ setVisible(false)
+ }}>
+ ))}
+
+ )} title="图标" trigger="click">
+
+
+
+ );
+}
+
+export const Icon = connect({
+ getProps: mapStyledProps,
+ getComponent: mapTextComponent
+})(IconField)
+
+export default Icon
diff --git a/packages/app/src/components/form.fields/registry.ts b/packages/app/src/components/form.fields/registry.ts
index a48d44dc2..5cb3a86a5 100644
--- a/packages/app/src/components/form.fields/registry.ts
+++ b/packages/app/src/components/form.fields/registry.ts
@@ -16,6 +16,7 @@ import { Upload } from './upload'
import { Filter } from './filter'
import { RemoteSelect } from './remote-select'
import { SubTable } from './sub-table'
+import { Icon } from './icons'
export const setup = () => {
registerFormFields({
@@ -35,7 +36,7 @@ export const setup = () => {
month: DatePicker.MonthPicker,
week: DatePicker.WeekPicker,
string: Input,
- icon: Input,
+ icon: Icon,
textarea: Input.TextArea,
number: NumberPicker,
percent: Percent,
diff --git a/packages/app/src/components/icons/index.tsx b/packages/app/src/components/icons/index.tsx
index 300ab2120..a0a819374 100644
--- a/packages/app/src/components/icons/index.tsx
+++ b/packages/app/src/components/icons/index.tsx
@@ -10,18 +10,25 @@ import {
MenuOutlined,
} from '@ant-design/icons';
-const IconFont = createFromIconfontCN({
+export const IconFont = createFromIconfontCN({
scriptUrl: [
'//at.alicdn.com/t/font_2261954_u9jzwc44ug.js',
],
});
-const icons = new Map();
+export const icons = new Map();
-export function registerIcon(type: string, icon) {
+export function registerIcon(type: string, icon: any = IconFont) {
icons.set(type.toLowerCase(), icon);
}
+export function hasIcon(type: string) {
+ if (!type) {
+ return false;
+ }
+ return icons.has(type.toLowerCase());
+}
+
export function registerIcons(components) {
Object.keys(components).forEach(type => {
registerIcon(type, components[type]);
@@ -47,6 +54,9 @@ export function Icon(props: IconProps) {
const { type = '', ...restProps } = props;
if (type && icons.has(type.toLowerCase())) {
const IconComponent = icons.get(type.toLowerCase());
+ if (IconComponent === IconFont) {
+ return ;
+ }
return ;
}
return ;
diff --git a/packages/plugin-collections/src/collections/collections.ts b/packages/plugin-collections/src/collections/collections.ts
index fe7934734..5736ff89d 100644
--- a/packages/plugin-collections/src/collections/collections.ts
+++ b/packages/plugin-collections/src/collections/collections.ts
@@ -58,7 +58,6 @@ export default {
type: 'virtual',
name: 'icon',
title: '图标',
- defaultValue: 'TableOutlined',
component: {
type: 'icon',
showInTable: true,
diff --git a/packages/plugin-pages/src/collections/pages.ts b/packages/plugin-pages/src/collections/pages.ts
index 1b383167b..8719aafff 100644
--- a/packages/plugin-pages/src/collections/pages.ts
+++ b/packages/plugin-pages/src/collections/pages.ts
@@ -58,12 +58,12 @@ export default {
},
},
{
- interface: 'string',
+ interface: 'icon',
type: 'string',
name: 'icon',
title: '图标',
component: {
- type: 'string',
+ type: 'icon',
showInTable: true,
showInForm: true,
showInDetail: true,