feat: default add resetIcon Style

chore: remove

test: add case

feat(App):  icon reset style feature

Revert "feat(App):  icon reset style feature"

This reverts commit be6905553dcabbd490ad60be0c08c8328736bd62.

Revert "chore: remove"

This reverts commit 417d5f90051a342325ccc9b5cbf3d249ab0ec826.

chore: update

chore: update

components/app/__tests__/index.test.tsx

@@ -1,3 +1,4 @@
+import { SmileOutlined } from '@ant-design/icons';
 import React, { useEffect } from 'react';
 import App from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -140,4 +141,30 @@ describe('App', () => {
     );
     expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
   });
+
+  // https://github.com/ant-design/ant-design/issues/41197#issuecomment-1465803061
+  describe('restIcon style', () => {
+    beforeEach(() => {
+      Array.from(document.querySelectorAll('style')).forEach((style) => {
+        style.parentNode?.removeChild(style);
+      });
+    });
+
+    it('should work by default', () => {
+      const { container } = render(
+        <App>
+          <SmileOutlined />
+        </App>,
+      );
+
+      expect(container.querySelector('.anticon')).toBeTruthy();
+      const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+      expect(
+        dynamicStyles.some((style) => {
+          const { innerHTML } = style;
+          return innerHTML.startsWith('.anticon');
+        }),
+      ).toBeTruthy();
+    });
+  });
 });

components/config-provider/index.tsx

@@ -25,7 +25,7 @@ import useConfig from './hooks/useConfig';
 import useTheme from './hooks/useTheme';
 import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
-import useStyle from './style';
+import { useResetIconStyle } from './style';
 
 /**
  * Since too many feedback using static method like `Modal.confirm` not getting theme,
@@ -206,7 +206,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const shouldWrapSSR = iconPrefixCls !== parentContext.iconPrefixCls;
   const csp = customCsp || parentContext.csp;
 
-  const wrapSSR = useStyle(iconPrefixCls, csp);
+  const wrapSSR = useResetIconStyle(iconPrefixCls);
 
   const mergedTheme = useTheme(theme, parentContext.theme);
 

components/config-provider/style/index.ts

@@ -1,9 +1,10 @@
+/* eslint-disable import/prefer-default-export */
 import { useStyleRegister } from '@ant-design/cssinjs';
 import type { CSPConfig } from '..';
 import { resetIcon } from '../../style';
 import { useToken } from '../../theme/internal';
 
-const useStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
+export const useResetIconStyle = (iconPrefixCls: string) => {
   const [theme, token] = useToken();
 
   // Generate style for icons
@@ -27,5 +28,3 @@ const useStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
     ],
   );
 };
-
-export default useStyle;

components/theme/util/genComponentStyleHook.ts

@@ -3,7 +3,7 @@ import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
 import { ConfigContext } from '../../config-provider/context';
-import { genCommonStyle, genLinkStyle } from '../../style';
+import { useResetIconStyle } from '../../config-provider/style';
 import type { ComponentTokenMap, GlobalToken } from '../interface';
 import type { UseComponentStyleResult } from '../internal';
 import { mergeToken, statisticToken, useToken } from '../internal';
@@ -66,6 +66,9 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       },
     ]);
 
+    // Generate style for icons
+    useResetIconStyle(iconPrefixCls);
+
     return [
       useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
         const { token: proxyToken, flush } = statisticToken(token);