fix(ConfigProvider): use correct cssVar key for icon styles (ant-design#56504)

Co-authored-by: lijianan <574980606@qq.com>

Author: seanparmelee

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

@@ -96,6 +96,33 @@ describe('ConfigProvider.DynamicTheme', () => {
     ).toBeTruthy();
   });
 
+  it('icon styles should use cssVar key from theme config', () => {
+    render(
+      <ConfigProvider theme={{ cssVar: { key: 'custom-css-var' } }}>
+        <SmileOutlined />
+      </ConfigProvider>,
+    );
+
+    const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+
+    // Should have styles with the custom cssVar key
+    expect(
+      dynamicStyles.some((style) => {
+        const { innerHTML } = style;
+        return innerHTML.includes('.custom-css-var');
+      }),
+    ).toBeTruthy();
+
+    // Should NOT have styles with the default css-var-root key
+    // This ensures icon styles registered inside ConfigProvider use the correct context
+    expect(
+      dynamicStyles.some((style) => {
+        const { innerHTML } = style;
+        return innerHTML.includes('.css-var-root');
+      }),
+    ).toBeFalsy();
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('layer should affect icon', () => {
     render(

components/config-provider/index.tsx

@@ -91,6 +91,18 @@ import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
 import useStyle from './style';
 
+/**
+ * This component registers icon styles inside the DesignTokenContext.Provider
+ * so that CSS variables use the correct cssVar key from the theme config.
+ */
+const IconStyle: React.FC<{ iconPrefixCls: string; csp?: CSPConfig }> = ({
+  iconPrefixCls,
+  csp,
+}) => {
+  useStyle(iconPrefixCls, csp);
+  return null;
+};
+
 export type { Variant };
 
 export { Variants };
@@ -440,8 +452,6 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const iconPrefixCls = customIconPrefixCls || parentContext.iconPrefixCls || defaultIconPrefixCls;
   const csp = customCsp || parentContext.csp;
 
-  useStyle(iconPrefixCls, csp);
-
   const mergedTheme = useTheme(theme, parentContext.theme, { prefixCls: getPrefixCls('') });
 
   if (process.env.NODE_ENV !== 'production') {
@@ -591,6 +601,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   let childNode = (
     <>
+      <IconStyle iconPrefixCls={iconPrefixCls} csp={csp} />
       <PropWarning dropdownMatchSelectWidth={dropdownMatchSelectWidth} />
       {children}
     </>