Create a reusable alias for each forwardRef'd component

packages/icons-react/package.json

@@ -60,7 +60,7 @@
     "rimraf": "^3.0.0",
     "styled-components": "^3.3.3",
     "ts-node": "^8.0.0",
-    "typescript": "^4.0.2"
+    "typescript": "^4.2.4"
   },
   "dependencies": {
     "@ant-design/colors": "^6.0.0",

packages/icons-react/scripts/generate.ts

@@ -41,15 +41,17 @@ async function generateIcons() {
 
 import * as React from 'react'
 import <%= svgIdentifier %>Svg from '@ant-design/icons-svg/lib/asn/<%= svgIdentifier %>';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const <%= svgIdentifier %> = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={<%= svgIdentifier %>Svg} />;
 
 <%= svgIdentifier %>.displayName = '<%= svgIdentifier %>';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(<%= svgIdentifier %>);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(<%= svgIdentifier %>);
+export default Comp;
 `.trim());
 
   await walk(async ({ svgIdentifier }) => {

packages/icons-react/src/components/AntdIcon.tsx

@@ -20,9 +20,11 @@ export interface IconComponentProps extends AntdIconProps {
 // should move it to antd main repo?
 setTwoToneColor('#1890ff');
 
+export type ForwardRefBaseComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<HTMLSpanElement>>;
+
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-488848720
 interface IconBaseComponent<Props>
-  extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>> {
+  extends ForwardRefBaseComponent<Props> {
   getTwoToneColor: typeof getTwoToneColor;
   setTwoToneColor: typeof setTwoToneColor;
 }

packages/icons-react/src/icons/AccountBookFilled.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AccountBookFilledSvg from '@ant-design/icons-svg/lib/asn/AccountBookFilled';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AccountBookFilled = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AccountBookFilledSvg} />;
 
 AccountBookFilled.displayName = 'AccountBookFilled';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AccountBookFilled);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AccountBookFilled);
+export default Comp;

packages/icons-react/src/icons/AccountBookOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AccountBookOutlinedSvg from '@ant-design/icons-svg/lib/asn/AccountBookOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AccountBookOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AccountBookOutlinedSvg} />;
 
 AccountBookOutlined.displayName = 'AccountBookOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AccountBookOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AccountBookOutlined);
+export default Comp;

packages/icons-react/src/icons/AccountBookTwoTone.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AccountBookTwoToneSvg from '@ant-design/icons-svg/lib/asn/AccountBookTwoTone';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AccountBookTwoTone = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AccountBookTwoToneSvg} />;
 
 AccountBookTwoTone.displayName = 'AccountBookTwoTone';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AccountBookTwoTone);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AccountBookTwoTone);
+export default Comp;

packages/icons-react/src/icons/AimOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AimOutlinedSvg from '@ant-design/icons-svg/lib/asn/AimOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AimOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AimOutlinedSvg} />;
 
 AimOutlined.displayName = 'AimOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AimOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AimOutlined);
+export default Comp;

packages/icons-react/src/icons/AlertFilled.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlertFilledSvg from '@ant-design/icons-svg/lib/asn/AlertFilled';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlertFilled = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlertFilledSvg} />;
 
 AlertFilled.displayName = 'AlertFilled';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlertFilled);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlertFilled);
+export default Comp;

packages/icons-react/src/icons/AlertOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlertOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlertOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlertOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlertOutlinedSvg} />;
 
 AlertOutlined.displayName = 'AlertOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlertOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlertOutlined);
+export default Comp;

packages/icons-react/src/icons/AlertTwoTone.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlertTwoToneSvg from '@ant-design/icons-svg/lib/asn/AlertTwoTone';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlertTwoTone = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlertTwoToneSvg} />;
 
 AlertTwoTone.displayName = 'AlertTwoTone';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlertTwoTone);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlertTwoTone);
+export default Comp;

packages/icons-react/src/icons/AlibabaOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlibabaOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlibabaOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlibabaOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlibabaOutlinedSvg} />;
 
 AlibabaOutlined.displayName = 'AlibabaOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlibabaOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlibabaOutlined);
+export default Comp;

packages/icons-react/src/icons/AlignCenterOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlignCenterOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlignCenterOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlignCenterOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlignCenterOutlinedSvg} />;
 
 AlignCenterOutlined.displayName = 'AlignCenterOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlignCenterOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlignCenterOutlined);
+export default Comp;

packages/icons-react/src/icons/AlignLeftOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlignLeftOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlignLeftOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlignLeftOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlignLeftOutlinedSvg} />;
 
 AlignLeftOutlined.displayName = 'AlignLeftOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlignLeftOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlignLeftOutlined);
+export default Comp;

packages/icons-react/src/icons/AlignRightOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlignRightOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlignRightOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlignRightOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlignRightOutlinedSvg} />;
 
 AlignRightOutlined.displayName = 'AlignRightOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlignRightOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlignRightOutlined);
+export default Comp;

packages/icons-react/src/icons/AlipayCircleFilled.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlipayCircleFilledSvg from '@ant-design/icons-svg/lib/asn/AlipayCircleFilled';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlipayCircleFilled = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlipayCircleFilledSvg} />;
 
 AlipayCircleFilled.displayName = 'AlipayCircleFilled';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipayCircleFilled);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipayCircleFilled);
+export default Comp;

packages/icons-react/src/icons/AlipayCircleOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlipayCircleOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlipayCircleOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlipayCircleOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlipayCircleOutlinedSvg} />;
 
 AlipayCircleOutlined.displayName = 'AlipayCircleOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipayCircleOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipayCircleOutlined);
+export default Comp;

packages/icons-react/src/icons/AlipayOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlipayOutlinedSvg from '@ant-design/icons-svg/lib/asn/AlipayOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlipayOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlipayOutlinedSvg} />;
 
 AlipayOutlined.displayName = 'AlipayOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipayOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipayOutlined);
+export default Comp;

packages/icons-react/src/icons/AlipaySquareFilled.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AlipaySquareFilledSvg from '@ant-design/icons-svg/lib/asn/AlipaySquareFilled';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AlipaySquareFilled = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AlipaySquareFilledSvg} />;
 
 AlipaySquareFilled.displayName = 'AlipaySquareFilled';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipaySquareFilled);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AlipaySquareFilled);
+export default Comp;

packages/icons-react/src/icons/AliwangwangFilled.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AliwangwangFilledSvg from '@ant-design/icons-svg/lib/asn/AliwangwangFilled';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AliwangwangFilled = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AliwangwangFilledSvg} />;
 
 AliwangwangFilled.displayName = 'AliwangwangFilled';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AliwangwangFilled);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AliwangwangFilled);
+export default Comp;

packages/icons-react/src/icons/AliwangwangOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AliwangwangOutlinedSvg from '@ant-design/icons-svg/lib/asn/AliwangwangOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AliwangwangOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AliwangwangOutlinedSvg} />;
 
 AliwangwangOutlined.displayName = 'AliwangwangOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AliwangwangOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AliwangwangOutlined);
+export default Comp;

packages/icons-react/src/icons/AliyunOutlined.tsx

@@ -3,12 +3,14 @@
 
 import * as React from 'react'
 import AliyunOutlinedSvg from '@ant-design/icons-svg/lib/asn/AliyunOutlined';
-import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+import AntdIcon, { AntdIconProps, ForwardRefBaseComponent } from '../components/AntdIcon';
 
 const AliyunOutlined = (
   props: AntdIconProps,
   ref: React.MutableRefObject<HTMLSpanElement>,
 ) => <AntdIcon {...props} ref={ref} icon={AliyunOutlinedSvg} />;
 
 AliyunOutlined.displayName = 'AliyunOutlined';
-export default React.forwardRef<HTMLSpanElement, AntdIconProps>(AliyunOutlined);
+
+const Comp: ForwardRefBaseComponent<AntdIconProps> = React.forwardRef<HTMLSpanElement, AntdIconProps>(AliyunOutlined);
+export default Comp;