🐛 fix Icon component ts error with cra definition

close #13205
close #19638

.jest.js

@@ -31,7 +31,7 @@ module.exports = {
     '!components/*/style/index.tsx',
     '!components/style/index.tsx',
     '!components/*/locale/index.tsx',
-    '!components/form/__tests__/type.test.tsx',
+    '!components/*/__tests__/type.test.tsx',
     '!components/**/*/interface.{ts,tsx}',
   ],
   transformIgnorePatterns,

components/icon/__tests__/type.test.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Icon from '..';
+import { ReactComponent as logo } from './logo.svg';
+
+describe('Icon TypeScript test', () => {
+  it('empty test case placeholder to avoid jest error', () => {
+    // empty
+  });
+});
+
+<Icon component={logo} />;

components/icon/index.tsx

@@ -67,7 +67,7 @@ export interface IconProps {
   title?: string;
   onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
   onClick?: React.MouseEventHandler<HTMLElement>;
-  component?: React.ComponentType<CustomIconComponentProps>;
+  component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
   twoToneColor?: string;
   viewBox?: string;
   spin?: boolean;

typings/custom-typings.d.ts

@@ -1,4 +1,12 @@
-declare module '*.svg';
+// https://github.com/facebook/create-react-app/blob/f09d3d3a52c1b938cecc977c2bbc0942ea0a7e70/packages/react-scripts/lib/react-app.d.ts#L42-L49
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+  const src: string;
+  export default src;
+}
 
 declare module 'rc-calendar*';