refactor: provide iconCls in token (#34869)

* perf: provide iconCls in token

* chore: code style

* chore: use import/export type

components/_util/theme/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CSSInterpolation, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
+import genComponentStyleHook from './util/genComponentStyleHook';
 import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
 import version from '../../version';
 import { resetComponent, resetIcon, clearFix, roundedArrow } from './util';
@@ -24,6 +25,7 @@ import type {
   OverrideToken,
   PresetColorType,
 } from './interface';
+import type { FullToken } from './util/genComponentStyleHook';
 
 export {
   PresetColors,
@@ -44,6 +46,8 @@ export {
   // Statistic
   statisticToken,
   mergeToken,
+  // GenComponentStyleHook
+  genComponentStyleHook,
 };
 
 export type {
@@ -52,6 +56,7 @@ export type {
   PresetColorType,
   // FIXME: Remove this type
   AliasToken as DerivativeToken,
+  FullToken,
 };
 
 // ================================ Context =================================

components/_util/theme/util/genComponentStyleHook.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-redeclare */
 import { CSSInterpolation, useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
-import { GlobalToken, OverrideToken } from '../theme/interface';
-import { mergeToken, statisticToken, UseComponentStyleResult, useToken } from '../theme';
-import { ConfigContext } from '../../config-provider';
+import { GlobalToken, OverrideToken } from '../interface';
+import { mergeToken, statisticToken, UseComponentStyleResult, useToken } from '../index';
+import { ConfigContext } from '../../../config-provider';
 
 export type OverrideTokenWithoutDerivative = Omit<OverrideToken, 'derivative'>;
 export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@@ -15,7 +15,11 @@ export type StyleInfo = {
   rootPrefixCls: string;
   iconPrefixCls: string;
 };
-export type TokenWithComponentCls<T> = T & { componentCls: string; prefixCls: string };
+export type TokenWithComponentCls<T> = T & {
+  componentCls: string;
+  prefixCls: string;
+  iconCls: string;
+};
 export type FullToken<ComponentName extends OverrideComponent> = TokenWithComponentCls<
   GlobalTokenWithComponent<ComponentName>
 >;
@@ -48,7 +52,11 @@ function genComponentStyleHook<ComponentName extends OverrideComponent>(
         }
         const mergedToken = mergeToken<
           TokenWithComponentCls<GlobalTokenWithComponent<OverrideComponent>>
-        >(proxyToken, { componentCls: `.${prefixCls}`, prefixCls }, mergedComponentToken);
+        >(
+          proxyToken,
+          { componentCls: `.${prefixCls}`, prefixCls, iconCls: `.${iconPrefixCls}` },
+          mergedComponentToken,
+        );
 
         const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
           hashId,

components/button/style/index.tsx

@@ -1,8 +1,8 @@
 // deps-lint-skip-all
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import genComponentStyleHook, { FullToken } from '../../_util/hooks/genComponentStyleHook';
-import { GenerateStyle, mergeToken } from '../../_util/theme';
+import { mergeToken, genComponentStyleHook } from '../../_util/theme';
+import type { GenerateStyle, FullToken } from '../../_util/theme';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -10,13 +10,11 @@ export interface ComponentToken {
   colorBgTextActive: string;
 }
 
-interface ButtonToken extends FullToken<'Button'> {
-  iconPrefixCls: string;
-}
+interface ButtonToken extends FullToken<'Button'> {}
 
 // ============================== Shared ==============================
 const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
-  const { componentCls, iconPrefixCls } = token;
+  const { componentCls, iconCls } = token;
 
   return {
     [componentCls]: {
@@ -41,7 +39,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       },
 
       // Leave a space between icon and text.
-      [`> .${iconPrefixCls} + span, > span + .${iconPrefixCls}`]: {
+      [`> ${iconCls} + span, > span + ${iconCls}`]: {
         marginInlineStart: token.marginXS,
       },
 
@@ -297,7 +295,7 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
 
 // =============================== Size ===============================
 const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSSInterpolation => {
-  const { componentCls, iconPrefixCls } = token;
+  const { componentCls, iconCls } = token;
 
   const paddingVertical = Math.max(
     0,
@@ -335,10 +333,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
           transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
         },
 
-        [`&:not(${iconOnlyCls}) ${componentCls}-loading-icon:not(:only-child) > .${iconPrefixCls}`]:
-          {
-            marginInlineEnd: token.marginXS,
-          },
+        [`&:not(${iconOnlyCls}) ${componentCls}-loading-icon:not(:only-child) > ${iconCls}`]: {
+          marginInlineEnd: token.marginXS,
+        },
       },
     },
 
@@ -375,25 +372,18 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Button',
-  (token, { iconPrefixCls }) => {
-    const buttonToken: ButtonToken = {
-      ...token,
-      iconPrefixCls,
-    };
+  token => [
+    // Shared
+    genSharedButtonStyle(token),
 
-    return [
-      // Shared
-      genSharedButtonStyle(buttonToken),
+    // Size
+    genSizeSmallButtonStyle(token),
+    genSizeBaseButtonStyle(token),
+    genSizeLargeButtonStyle(token),
 
-      // Size
-      genSizeSmallButtonStyle(buttonToken),
-      genSizeBaseButtonStyle(buttonToken),
-      genSizeLargeButtonStyle(buttonToken),
-
-      // Group (type, ghost, danger, disabled, loading)
-      genTypeButtonStyle(buttonToken),
-    ];
-  },
+    // Group (type, ghost, danger, disabled, loading)
+    genTypeButtonStyle(token),
+  ],
   token => {
     const { colorText } = token;
     const textColor = new TinyColor(colorText);

components/cascader/style/index.tsx

@@ -8,9 +8,9 @@
 // // deps-lint-skip: form
 
 // deps-lint-skip-all
-import genComponentStyleHook, { FullToken } from '../../_util/hooks/genComponentStyleHook';
-import { GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
+import type { GenerateStyle, FullToken } from '../../_util/theme';
 
 export interface ComponentToken {
   controlWidth: number;