perf(📦): upgrade rc-image to 5.x (#28727)

* refactor: upgrade rc-image to 5.x

reduce bundle size

* upgrade rc-image

* upgrade @ant-design/tools

ant-design/antd-tools#226

* rc-image 5.0.0

* fix image preview icon missing

* refactor code

components/image/PreviewGroup.tsx

@@ -1,15 +1,38 @@
 import * as React from 'react';
 import RcImage from 'rc-image';
-import { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
+import RotateLeftOutlined from '@ant-design/icons/RotateLeftOutlined';
+import RotateRightOutlined from '@ant-design/icons/RotateRightOutlined';
+import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined';
+import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import RightOutlined from '@ant-design/icons/RightOutlined';
+import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
 import { ConfigContext } from '../config-provider';
 
+export const icons = {
+  rotateLeft: <RotateLeftOutlined />,
+  rotateRight: <RotateRightOutlined />,
+  zoomIn: <ZoomInOutlined />,
+  zoomOut: <ZoomOutOutlined />,
+  close: <CloseOutlined />,
+  left: <LeftOutlined />,
+  right: <RightOutlined />,
+};
+
 const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   previewPrefixCls: customizePrefixCls,
   ...props
 }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('image-preview', customizePrefixCls);
-  return <RcImage.PreviewGroup previewPrefixCls={prefixCls} {...props} />;
+  return (
+    <RcImage.PreviewGroup
+      previewPrefixCls={prefixCls}
+      icons={icons}
+      {...props}
+    />
+  );
 };
 
 export default InternalPreviewGroup;

components/image/index.tsx

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import RcImage, { ImageProps } from 'rc-image';
 import defaultLocale from '../locale/en_US';
-import PreviewGroup from './PreviewGroup';
+import PreviewGroup, { icons } from './PreviewGroup';
 import { ConfigContext } from '../config-provider';
 
 export interface CompositionImage<P> extends React.FC<P> {
@@ -33,6 +33,7 @@ const Image: CompositionImage<ImageProps> = ({
           {imageLocale?.preview}
         </div>
       ),
+      icons,
       ...(typeof preview === 'object' ? preview : null),
     };
   }, [preview, imageLocale]);

package.json

@@ -124,7 +124,7 @@
     "rc-drawer": "~4.1.0",
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.17.3",
-    "rc-image": "~4.5.0",
+    "rc-image": "~5.0.1",
     "rc-input-number": "~6.1.0",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.10.0",
@@ -153,7 +153,7 @@
   "devDependencies": {
     "@ant-design/bisheng-plugin": "^2.3.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "13.2.2",
+    "@ant-design/tools": "^13.3.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
     "@types/classnames": "^2.2.8",