fix: layer support icon (#52533)

* fix: icon context

* docs: update desc

components/config-provider/__tests__/cssinjs.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import { SmileOutlined } from '@ant-design/icons';
 
 import ConfigProvider from '..';
@@ -90,4 +91,21 @@ describe('ConfigProvider.DynamicTheme', () => {
       }),
     ).toBeTruthy();
   });
+
+  it('layer should affect icon', () => {
+    render(
+      <StyleProvider layer cache={createCache()}>
+        <ConfigProvider>
+          <SmileOutlined />
+        </ConfigProvider>
+      </StyleProvider>,
+    );
+
+    const styles = Array.from(document.querySelectorAll('style'));
+
+    expect(styles.length).toBeTruthy();
+    styles.forEach((style) => {
+      expect(style.innerHTML).toContain('@layer antd');
+    });
+  });
 });

components/config-provider/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createTheme } from '@ant-design/cssinjs';
+import { createTheme, StyleContext as CssInJsStyleContext } from '@ant-design/cssinjs';
 import IconContext from '@ant-design/icons/lib/components/Context';
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import { merge } from 'rc-util/lib/utils/set';
@@ -27,6 +27,7 @@ import type {
   DatePickerConfig,
   DirectionType,
   DrawerConfig,
+  EmptyConfig,
   FlexConfig,
   FloatButtonGroupConfig,
   FormConfig,
@@ -39,6 +40,8 @@ import type {
   ModalConfig,
   NotificationConfig,
   PaginationConfig,
+  PopconfirmConfig,
+  PopoverConfig,
   PopupOverflow,
   RangePickerConfig,
   SelectConfig,
@@ -52,14 +55,11 @@ import type {
   ThemeConfig,
   TimePickerConfig,
   TooltipConfig,
-  PopoverConfig,
-  PopconfirmConfig,
   TourConfig,
   TransferConfig,
   TreeSelectConfig,
   Variant,
   WaveConfig,
-  EmptyConfig,
 } from './context';
 import {
   ConfigConsumer,
@@ -558,9 +558,11 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     },
   );
 
+  const { layer } = React.useContext(CssInJsStyleContext);
+
   const memoIconContextValue = React.useMemo(
-    () => ({ prefixCls: iconPrefixCls, csp }),
-    [iconPrefixCls, csp],
+    () => ({ prefixCls: iconPrefixCls, csp, layer: layer ? 'antd' : undefined }),
+    [iconPrefixCls, csp, layer],
   );
 
   let childNode = (

docs/react/compatible-style.en-US.md

@@ -103,14 +103,17 @@ When toggled, styles will downgrade CSS logical properties:
 - Minimum Chrome Version Supported: 99
 - Default Enabled: No
 
-Ant Design supports configuring `@layer` for unified css priority downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`):
+Ant Design supports configuring `@layer` for unified css priority downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`).When enable `layer`, the child element **must** wrap `ConfigProvider` to update the icon-related styles:
 
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
 
 export default () => (
   <StyleProvider layer>
-    <MyApp />
+    <ConfigProvider>
+      <MyApp />
+    </ConfigProvider>
   </StyleProvider>
 );
 ```

docs/react/compatible-style.zh-CN.md

@@ -103,14 +103,17 @@ export default () => (
 - Chrome 最低支持版本：99
 - 默认启用：否
 
-Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）：
+Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）。StyleProvider 开启 `layer` 时，子元素**必须**包裹 ConfigProvider 以更新图标相关样式：
 
 ```tsx | pure
 import { StyleProvider } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
 
 export default () => (
   <StyleProvider layer>
-    <MyApp />
+    <ConfigProvider>
+      <MyApp />
+    </ConfigProvider>
   </StyleProvider>
 );
 ```

package.json

@@ -107,10 +107,10 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.2.0",
-    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs": "^1.23.0",
     "@ant-design/cssinjs-utils": "^1.1.3",
     "@ant-design/fast-color": "^2.0.6",
-    "@ant-design/icons": "^5.5.2",
+    "@ant-design/icons": "^5.6.0",
     "@ant-design/react-slick": "~1.1.2",
     "@babel/runtime": "^7.26.0",
     "@rc-component/color-picker": "~2.0.1",