Update icon

components/config-provider/SizeContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export type SizeType = 'small' | 'middle' | 'large' | undefined;
+export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'small' | 'middle' | 'large' | undefined;
 
 const SizeContext = React.createContext<SizeType>(undefined);
 

components/icon/index.tsx

@@ -1,8 +1,85 @@
-import warning from '../_util/warning';
+import * as React from 'react';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { IconWeight } from 'phosphor-react/src/lib';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { IconProps } from 'phosphor-react';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { AntIconType } from 'antd/es/icon/stories/icon.stories';
 
-const Icon: React.FC = () => {
-  warning(false, 'Icon', 'Empty Icon');
-  return null;
+interface SwIconProps {
+  type: string;
+  size?: SizeType;
+  phosphorIcon?: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+  fontawesomeIcon?: IconProp;
+  antDesignIcon?: AntIconType;
+  weight?: IconWeight;
+  iconColor?: string;
+}
+
+const Icon: React.FC<SwIconProps> = ({
+  type,
+  size,
+  phosphorIcon: PhosphorIcon,
+  fontawesomeIcon,
+  antDesignIcon: AntDesignIcon,
+  weight,
+  iconColor,
+}) => {
+  const getIconSize = () => {
+    if (size === 'xs') {
+      return '12px';
+    }
+    if (size === 'sm') {
+      return '16px';
+    }
+
+    return '24px';
+  };
+
+  const getAntIconSize = () => {
+    if (!size) {
+      return undefined;
+    }
+
+    if (size === 'xs') {
+      return 16;
+    }
+    if (size === 'sm') {
+      return 24;
+    }
+
+    return 32;
+  };
+
+  if (type === 'fontAwesome' && fontawesomeIcon) {
+    return (
+      <FontAwesomeIcon
+        icon={fontawesomeIcon}
+        style={{ width: getIconSize(), height: getIconSize() }}
+        color={iconColor}
+      />
+    );
+  }
+
+  if (type === 'phosphor' && PhosphorIcon) {
+    return <PhosphorIcon size={getIconSize()} weight={weight} color={iconColor} />;
+  }
+
+  if (type === 'antDesignIcon' && AntDesignIcon) {
+    return (
+      <AntDesignIcon
+        style={{
+          fontSize: getAntIconSize(),
+          color: iconColor,
+          width: getAntIconSize(),
+          height: getAntIconSize(),
+        }}
+      />
+    );
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <></>;
 };
 
 export default Icon;

components/icon/stories/icon.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { CaretUp, MagnifyingGlass, WifiHigh } from 'phosphor-react';
+import { faChevronUp, faMagnifyingGlass, faWifi } from '@fortawesome/free-solid-svg-icons';
+import type { StepBackwardOutlined } from '@ant-design/icons';
+import { SearchOutlined, WifiOutlined, UpOutlined } from '@ant-design/icons';
+import Icon from '..';
+
+export type AntIconType = typeof StepBackwardOutlined;
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Core/Icon',
+  component: Icon,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['xs', 'sm', 'md'],
+      defaultValue: 'md',
+    },
+    iconColor: { control: 'color', defaultValue: '#FFFFFF' },
+  },
+} as ComponentMeta<typeof Icon>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Icon> = (args) => (
+  <>
+    <div>
+      <Icon {...args} type="phosphor" phosphorIcon={MagnifyingGlass} />
+      <Icon {...args} type="phosphor" phosphorIcon={WifiHigh} />
+      <Icon {...args} type="phosphor" phosphorIcon={CaretUp} />
+    </div>
+    <div>
+      <Icon {...args} type="fontAwesome" fontawesomeIcon={faMagnifyingGlass} />
+      <Icon {...args} type="fontAwesome" fontawesomeIcon={faWifi} />
+      <Icon {...args} type="fontAwesome" fontawesomeIcon={faChevronUp} />
+    </div>
+    <div>
+      <Icon {...args} type="antDesignIcon" antDesignIcon={SearchOutlined} />
+      <Icon {...args} type="antDesignIcon" antDesignIcon={WifiOutlined} />
+      <Icon {...args} type="antDesignIcon" antDesignIcon={UpOutlined} />
+    </div>
+  </>
+);
+
+export const SwIcon = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args

package.json

@@ -117,10 +117,15 @@
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@rc-component/tour": "~1.1.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",
+    "phosphor-react": "^1.4.1",
     "qrcode.react": "^3.1.0",
     "rc-cascader": "~3.8.0",
     "rc-checkbox": "~2.3.0",