feat: add Iconfont support, and enhance useSplitter hook

shijistar · shijistar · commit c7fc7052c198 · 2026-03-09T18:53:03.000+08:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     'react/no-array-index-key': 'error',
     'react-hooks/exhaustive-deps': 0,
     'react-hooks/rules-of-hooks': 0,
+    'react/prop-types': 0,
     '@tiny-codes/react-hooks/rules-of-hooks': ['error'],
     '@tiny-codes/react-hooks/exhaustive-deps': ['error'],
   },
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,7 +18,7 @@
   "i18n-ally.keystyle": "nested",
   "i18n-ally.fullReloadOnChanged": true,
   "i18n-ally.annotationInPlace": true,
-  "cSpell.words": ["contexify"],
+  "cSpell.words": ["contexify", "Iconfont"],
   "files.exclude": {
     "**/.git": true,
     "**/.svn": true,
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,21 @@
 
 # Changelog
 
-## 1.7.5
+## 1.7.7
+
+2026-3-9
+
+### Features
+
+- **ConfigProvider.ConfigContext**
+
+  - ✨ Add `getPrefixCls` in ConfigProvider.ConfigContext.
+
+- **Iconfont**
+
+  - ✨ Add `createIconfont` function to create custom Iconfont components.
+
+## 1.7.6
 
 2026-2-28
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiny-codes/react-easy",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",
diff --git a/src/components/ColumnSetting/index.tsx b/src/components/ColumnSetting/index.tsx
@@ -1,12 +1,13 @@
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { Button, Checkbox, ConfigProvider, Divider, Dropdown, Space, Typography } from 'antd';
+import { Button, Checkbox, Divider, Dropdown, Space, Typography } from 'antd';
 import type { ButtonProps, DropdownProps } from 'antd';
 import type { ColumnType } from 'antd/es/table';
 import classNames from 'classnames';
 import { ReloadOutlined, SettingOutlined } from '@ant-design/icons';
 import { useRefFunction, useRefValue } from '../../hooks';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import useT from '../../hooks/useT';
+import ConfigProvider from '../ConfigProvider';
 import useStyle from './style';
 
 export interface ColumnSettingProps<T extends ColumnSettingItem = ColumnSettingItem> {
diff --git a/src/components/ConfigProvider/context.tsx b/src/components/ConfigProvider/context.tsx
@@ -9,6 +9,7 @@ import type { EditableTextProps } from '../EditableText';
 import type { ModalActionProps } from '../ModalAction';
 
 export interface ReactEasyContextProps {
+  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
   /**
    * - **EN:** Language of the component, used for global configuration, can be 'en-US' or 'zh-CN'
    * - **CN:** 组件的语言，用于全局配置，可以是'en-US'或'zh-CN'
@@ -92,6 +93,7 @@ export interface ReactEasyContextProps {
 }
 
 export const defaultContextValue: ReactEasyContextProps = {
+  getPrefixCls: undefined!,
   lang: 'en-US',
 };
 
diff --git a/src/components/ConfigProvider/index.tsx b/src/components/ConfigProvider/index.tsx
@@ -7,7 +7,7 @@ import type localesEn from '../../locales/langs/en';
 import ReactEasyContext, { type ReactEasyContextProps } from './context';
 import useStyle from './style';
 
-export interface ConfigProviderProps extends ReactEasyContextProps {
+export interface ConfigProviderProps extends Omit<ReactEasyContextProps, 'getPrefixCls'> {
   /**
    * - **EN:** Child elements of the ConfigProvider
    * - **CN:** ConfigProvider 的子元素
@@ -40,7 +40,7 @@ export interface ConfigProviderProps extends ReactEasyContextProps {
  * - **EN:** Provide global configuration for AntdHelper
  * - **CN:** 提供AntdHelper的全局配置
  */
-const ConfigProvider: FC<ConfigProviderProps> = (props) => {
+const ConfigProvider: FC<ConfigProviderProps> & { ConfigContext: typeof ReactEasyContext } = (props) => {
   const { children, locales: userLocales, prefixCls: prefixClsInProps, className, style, ...restProps } = props;
   const { lang: langInProps } = restProps;
   const { getPrefixCls, rootPrefixCls } = useContext(ReactConfigProvider.ConfigContext);
@@ -51,10 +51,14 @@ const ConfigProvider: FC<ConfigProviderProps> = (props) => {
       if (langInProps !== locales.language) {
         locales.changeLanguage(langInProps || 'en-US');
       }
-      return restProps;
+      return {
+        ...restProps,
+        getPrefixCls: (suffixCls: string, customizePrefixCls?: string) =>
+          getPrefixCls(`easy-${suffixCls}`, customizePrefixCls),
+      };
     },
     // eslint-disable-next-line @tiny-codes/react-hooks/exhaustive-deps
-    [langInProps, ...Object.values(restProps)]
+    [langInProps, getPrefixCls, ...Object.values(restProps)]
   );
 
   useEffect(() => {
@@ -79,5 +83,6 @@ const ConfigProvider: FC<ConfigProviderProps> = (props) => {
   );
 };
 ConfigProvider.displayName = 'ReactEasyConfigProvider';
+ConfigProvider.ConfigContext = ReactEasyContext;
 
 export default ConfigProvider;
diff --git a/src/components/ConfigProvider/style/index.ts b/src/components/ConfigProvider/style/index.ts
@@ -3,9 +3,9 @@ import type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken } from '@ant-design/cssinjs-utils';
 
-type OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;
+type ConfigProviderToken = FullToken<{ ''?: object }, AliasToken, ''>;
 
-const genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {
+const genStyle: GenerateStyle<ConfigProviderToken> = (token): CSSObject => {
   const { componentCls } = token;
   return {
     [componentCls]: {
@@ -87,4 +87,4 @@ const genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {
   };
 };
 
-export default genStyleHooks('EasyConfigProvider' as never, genStyle);
+export default genStyleHooks('ConfigProvider' as never, genStyle);
diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
@@ -1,10 +1,11 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { forwardRef, useContext, useImperativeHandle, useMemo } from 'react';
-import { theme as AntdTheme, ConfigProvider, Typography } from 'antd';
+import { ConfigProvider as AntConfigProvider, theme as AntdTheme, Typography } from 'antd';
 import classNames from 'classnames';
 import type { ItemProps, MenuProps, SeparatorProps, ShowContextMenuParams, SubMenuProps } from 'react-contexify';
 import { Item, Menu, RightSlot, Separator, Submenu, useContextMenu } from 'react-contexify';
 import { useRefFunction } from '../../hooks';
+import ConfigProvider from '../ConfigProvider';
 import useStyle from './style';
 import 'react-contexify/dist/ReactContexify.css';
 
@@ -209,11 +210,11 @@ function getShortcutText(
   const keys: ReactNode[] = [];
   const Keyboard = (props: { children: ReactNode }) => {
     return (
-      <ConfigProvider theme={{ algorithm: theme === 'dark' ? AntdTheme.darkAlgorithm : undefined }}>
+      <AntConfigProvider theme={{ algorithm: theme === 'dark' ? AntdTheme.darkAlgorithm : undefined }}>
         <Typography.Text keyboard className={`${cmpPrefixCls}-shortcut-key`}>
           {props.children}
         </Typography.Text>
-      </ConfigProvider>
+      </AntConfigProvider>
     );
   };
   if (event.ctrlKey) keys.push(<Keyboard>^</Keyboard>);
diff --git a/src/components/ContextMenu/style/index.ts b/src/components/ContextMenu/style/index.ts
@@ -3,9 +3,9 @@ import type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken } from '@ant-design/cssinjs-utils';
 
-type OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;
+type ContextMenuToken = FullToken<{ ''?: object }, AliasToken, ''>;
 
-const genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {
+const genStyle: GenerateStyle<ContextMenuToken> = (token): CSSObject => {
   const { componentCls } = token;
   return {
     [componentCls]: {
diff --git a/src/components/EditableText/index.tsx b/src/components/EditableText/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { ConfigProvider, Flex, Typography } from 'antd';
+import { Flex, Typography } from 'antd';
 import type { EllipsisConfig } from 'antd/es/typography/Base';
 import type { LinkProps } from 'antd/es/typography/Link';
 import type { ParagraphProps } from 'antd/es/typography/Paragraph';
@@ -9,6 +9,7 @@ import type { TitleProps } from 'antd/es/typography/Title';
 import names from 'classnames';
 import { EditOutlined } from '@ant-design/icons';
 import useT from '../../hooks/useT';
+import ConfigProvider from '../ConfigProvider';
 import EditableTextForm, { type EditableFormProps, type RenderInputInterface } from './form';
 import useStyle from './style';
 
@@ -219,7 +220,7 @@ const EditableText = <
   } = props;
 
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('easy-editable-text', prefixClsInProps);
+  const prefixCls = getPrefixCls('editable-text', prefixClsInProps);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const t = useT();
   const [isEditing, setIsEditing] = useState<boolean>(editing);
diff --git a/src/components/FloatDrawer/index.tsx b/src/components/FloatDrawer/index.tsx
@@ -1,10 +1,11 @@
 import type { CSSProperties, FC, ReactNode } from 'react';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import type { CardProps } from 'antd';
-import { Card, ConfigProvider } from 'antd';
+import { Card } from 'antd';
 import classNames from 'classnames';
 import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
 import useRefFunction from '../../hooks/useRefFunction';
+import ConfigProvider from '../ConfigProvider';
 import useStyle from './style';
 
 export interface FloatDrawerProps {
@@ -225,7 +226,7 @@ const FloatDrawer: FC<FloatDrawerProps> = (props) => {
     onClick,
   } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('easy-float-drawer', prefixClsInProps);
+  const prefixCls = getPrefixCls('float-drawer', prefixClsInProps);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);
   const [size, setSize] = useState(
diff --git a/src/components/FloatDrawer/style/index.ts b/src/components/FloatDrawer/style/index.ts
@@ -5,9 +5,9 @@ import type { FullToken } from '@ant-design/cssinjs-utils';
 import { FastColor } from '@ant-design/fast-color';
 import { getColorLuminance } from '../../../utils';
 
-type REFloatDrawerToken = FullToken<{ ''?: object }, AliasToken, ''>;
+type FloatDrawerToken = FullToken<{ ''?: object }, AliasToken, ''>;
 
-const genStyle: GenerateStyle<REFloatDrawerToken> = (token): CSSObject => {
+const genStyle: GenerateStyle<FloatDrawerToken> = (token): CSSObject => {
   const { componentCls } = token;
   return {
     [componentCls]: {
@@ -228,4 +228,4 @@ const genStyle: GenerateStyle<REFloatDrawerToken> = (token): CSSObject => {
   };
 };
 
-export default genStyleHooks('EasyFloatDrawer' as never, genStyle);
+export default genStyleHooks('FloatDrawer' as never, genStyle);
diff --git a/src/components/Iconfont/createIconfont.tsx b/src/components/Iconfont/createIconfont.tsx
@@ -0,0 +1,61 @@
+import { type CSSProperties, type FC, useContext } from 'react';
+import classNames from 'classnames';
+import { createFromIconfontCN } from '@ant-design/icons';
+import type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/components/IconFont';
+import ConfigProvider from '../ConfigProvider';
+
+/**
+ * - **EN:** Props for the Iconfont component
+ * - **CN:** Iconfont 组件的props
+ */
+export interface IconfontProps<T extends string = string> extends Omit<AntIconFontProps<T>, 'type' | 'size'> {
+  /**
+   * - **EN:** Icon name. Find an icon in iconfont and click `Copy Code`
+   * - **CN:** 图标名称。在 iconfont 中找到某个图标，点击`复制代码`
+   */
+  type: T;
+  /**
+   * - **EN:** Icon size, an alias for `style.fontSize`
+   * - **CN:** 图标尺寸，是 `style.fontSize` 的别名
+   */
+  size?: CSSProperties['fontSize'];
+}
+
+/**
+ * - **EN:** Create an Iconfont component with a specified iconfont script URL.
+ * - **CN:** 创建一个Iconfont组件，指定iconfont的脚本地址
+ *
+ * @param scriptUrl - Path to the iconfont script | 字体图标的路径
+ */
+export const createIconfont = <T extends string = string>(
+  scriptUrl: string,
+  options?: {
+    /** Icon name prefix | 图标名称前缀 */
+    iconPrefix?: string;
+  }
+): FC<IconfontProps<T>> => {
+  const { iconPrefix = '' } = options || {};
+  const AntdIconfont = createFromIconfontCN({ scriptUrl });
+  /**
+   * - **EN:** Render an iconfont icon, setting the `type` prop to the iconfont icon name.
+   * - **CN:** 渲染一个 iconfont 的图标，把 `type` 属性设置为 iconfont 字体的图标名
+   */
+  const Iconfont: FC<IconfontProps<T>> = (props) => {
+    const { type, className, size, style, ...iconProps } = props;
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const iconType = type.startsWith(iconPrefix) ? type : `${iconPrefix}-${type}`;
+
+    return (
+      <AntdIconfont
+        type={iconType}
+        className={classNames(getPrefixCls('iconfont'), className)}
+        style={{
+          ...style,
+          fontSize: style?.fontSize ?? size,
+        }}
+        {...iconProps}
+      />
+    );
+  };
+  return Iconfont;
+};
diff --git a/src/components/Iconfont/index.tsx b/src/components/Iconfont/index.tsx
@@ -0,0 +1 @@
+export * from './createIconfont';
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
@@ -1,7 +1,8 @@
 import { type CSSProperties, type FC, useContext } from 'react';
 import type { SpinProps } from 'antd';
-import { ConfigProvider, Spin } from 'antd';
+import { Spin } from 'antd';
 import classNames from 'classnames';
+import ConfigProvider from '../ConfigProvider';
 import useStyle from './style';
 
 export type LoadingProps = SpinProps & {
@@ -82,7 +83,7 @@ const Loading: FC<LoadingProps> = (props) => {
   } = props;
 
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('easy-loading', prefixClsInProps);
+  const prefixCls = getPrefixCls('loading', prefixClsInProps);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   return children
diff --git a/src/components/Loading/style/index.ts b/src/components/Loading/style/index.ts
@@ -3,9 +3,9 @@ import type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken } from '@ant-design/cssinjs-utils';
 
-type OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;
+type LoadingToken = FullToken<{ ''?: object }, AliasToken, ''>;
 
-const genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {
+const genStyle: GenerateStyle<LoadingToken> = (token): CSSObject => {
   const { componentCls } = token;
   return {
     [componentCls]: {
@@ -29,4 +29,4 @@ const genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {
   };
 };
 
-export default genStyleHooks('EasyLoading' as never, genStyle);
+export default genStyleHooks('Loading' as never, genStyle);
diff --git a/src/components/OverflowTags/index.tsx b/src/components/OverflowTags/index.tsx
@@ -1,12 +1,13 @@
 import type { ReactNode } from 'react';
 import { useCallback, useContext, useMemo } from 'react';
 import type { DropdownProps, TagProps } from 'antd';
-import { ConfigProvider, Dropdown, Tag, theme } from 'antd';
+import { Dropdown, Tag, theme } from 'antd';
 import { PresetColors } from 'antd/es/theme/internal';
 import classNames from 'classnames';
 import type { OverflowProps } from 'rc-overflow';
 import Overflow from 'rc-overflow';
 import { random } from '../../utils/math';
+import ConfigProvider from '../ConfigProvider';
 import useStyle from './style';
 
 export interface OverflowTagsProps<T> extends Omit<OverflowProps<T>, 'renderItem'> {
@@ -97,7 +98,7 @@ const OverflowTags = <T,>(props: OverflowTagsProps<T>) => {
   } = props;
   const { token } = theme.useToken();
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('easy-overflow-tags', prefixClsInProps);
+  const prefixCls = getPrefixCls('overflow-tags', prefixClsInProps);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const colors = useMemo(
diff --git a/src/components/OverflowTags/style/index.ts b/src/components/OverflowTags/style/index.ts
@@ -19,4 +19,4 @@ const genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {
   };
 };
 
-export default genStyleHooks('EasyOverflowTags' as never, genStyle);
+export default genStyleHooks('OverflowTags' as never, genStyle);
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -48,6 +48,8 @@ export { default as FloatDrawer } from './FloatDrawer';
 export type { FormItemControlProps } from './FormItemControl';
 export { default as FormItemControl } from './FormItemControl';
 
+export * from './Iconfont';
+
 export type { LoadingProps } from './Loading';
 export { default as Loading } from './Loading';
 
diff --git a/src/hooks/style/useSplitter.ts b/src/hooks/style/useSplitter.ts
diff --git a/src/hooks/useSplitter.tsx b/src/hooks/useSplitter.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@tiny-codes/react-easy",`
`3`		`- "version": "1.7.6",`
	`3`	`+ "version": "1.7.7",`
`4`	`4`	`"description": "Simplify React and AntDesign development with practical components and hooks",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"react",`