支持全局替换内置icon

package.json

@@ -121,7 +121,6 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/classnames": "^2.3.1",
     "@types/estree": "0.0.50",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.3",
@@ -133,10 +132,7 @@
     "@types/react-transition-group": "^4.4.2",
     "@types/rimraf": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.2",
-    "@types/validator": "^13.1.3",
     "@types/react-is": "^17.0.3",
-    "@types/sortablejs": "^1.10.7",
-    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "@vitejs/plugin-react": "^1.3.2",
@@ -208,6 +204,9 @@
   "dependencies": {
     "@babel/runtime": "~7.17.2",
     "@popperjs/core": "~2.11.2",
+    "@types/sortablejs": "^1.10.7",
+    "@types/tinycolor2": "^1.4.3",
+    "@types/validator": "^13.1.3",
     "classnames": "~2.3.1",
     "dayjs": "~1.11.4",
     "hoist-non-react-statics": "~3.3.2",

site/src/App.jsx

@@ -93,7 +93,7 @@ function Components() {
   }, [location]);
 
   return (
-    <ConfigProvider /* globalConfig={{ locale, animation: { exclude: ['ripple'] }}} */>
+    <ConfigProvider /* globalConfig={{ animation: { exclude: ['ripple'] }}} */>
       <td-doc-layout>
         <td-header ref={tdHeaderRef} slot="header">
           <td-doc-search slot="search" ref={tdDocSearch} />

src/_util/useAnimation.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import useConfig from './useConfig';
+import useConfig from '../hooks/useConfig';
 import { EAnimationType } from '../config-provider/ConfigContext';
 
 export default function useAnimation() {

src/_util/useClickOutside.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, useEffect } from 'react';
-import useConfig from './useConfig';
+import useConfig from '../hooks/useConfig';
 
 export default function useClickOutside<T extends HTMLElement>(
   refs: MutableRefObject<T>[],

src/_util/useCommonClassName.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import useConfig from './useConfig';
+import useConfig from '../hooks/useConfig';
 
 export default function useCommonClassName() {
   const { classPrefix } = useConfig();

src/_util/useRipple.ts

@@ -1,5 +1,5 @@
 import { useEffect, useCallback, RefObject, useMemo } from 'react';
-import useConfig from './useConfig';
+import useConfig from '../hooks/useConfig';
 import useAnimation from './useAnimation';
 import setStyle from './setStyle';
 import { canUseDocument } from './dom';

src/affix/Affix.tsx

@@ -3,7 +3,7 @@ import isFunction from 'lodash/isFunction';
 import { StyledProps, ScrollContainerElement } from '../common';
 import { TdAffixProps } from './type';
 import { getScrollContainer } from '../_util/dom';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { affixDefaultProps } from './defaultProps';
 
 export interface AffixProps extends TdAffixProps, StyledProps {

src/alert/Alert.tsx

@@ -1,7 +1,13 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { InfoCircleFilledIcon, CloseIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
-import useConfig from '../_util/useConfig';
+import {
+  CloseIcon as TdCloseIcon,
+  InfoCircleFilledIcon as TdInfoCircleFilledIcon,
+  CheckCircleFilledIcon as TdCheckCircleFilledIcon,
+  ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
+} from 'tdesign-icons-react';
+import useConfig from '../hooks/useConfig';
+import useGlobalIcon from '../hooks/useGlobalIcon';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
 import { TdAlertProps } from './type';
 import { StyledProps } from '../common';
@@ -10,12 +16,19 @@ import { alertDefaultProps } from './defaultProps';
 export interface AlertProps extends TdAlertProps, StyledProps {}
 
 const Alert = forwardRef((props: AlertProps, ref: React.Ref<HTMLDivElement>) => {
+  const { classPrefix } = useConfig();
+  const [local, t] = useLocaleReceiver('alert');
+  const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } = useGlobalIcon({
+    CloseIcon: TdCloseIcon,
+    InfoCircleFilledIcon: TdInfoCircleFilledIcon,
+    CheckCircleFilledIcon: TdCheckCircleFilledIcon,
+    ErrorCircleFilledIcon: TdErrorCircleFilledIcon,
+  });
+
   const { message, title, operation, theme, icon, close, maxLine, onClose, className, ...alertProps } = props;
 
   const [closed, setClosed] = React.useState(false);
   const [collapsed, setCollapsed] = React.useState(false);
-  const { classPrefix } = useConfig();
-  const [local, t] = useLocaleReceiver('alert');
 
   const iconMap = {
     success: CheckCircleFilledIcon,

src/anchor/Anchor.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import { StyledProps } from '../common';
 import { TdAnchorProps } from './type';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import { canUseDocument, getScrollContainer } from '../_util/dom';
 import Affix from '../affix';

src/anchor/AnchorItem.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useContext, useEffect } from 'react';
 import classNames from 'classnames';
 import { TdAnchorItemProps } from './type';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { StyledProps } from '../common';
 import { AnchorContext } from './AnchorContext';
 import { anchorItemDefaultProps } from './defaultProps';

src/anchor/AnchorTarget.tsx

@@ -1,9 +1,10 @@
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
-import { FileCopyIcon } from 'tdesign-icons-react';
+import { FileCopyIcon as TdFileCopyIcon } from 'tdesign-icons-react';
 import Popup from '../popup';
 import { MessagePlugin } from '../message';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
+import useGlobalIcon from '../hooks/useGlobalIcon';
 import copyText from '../_util/copyText';
 
 import { TdAnchorTargetProps } from './type';
@@ -13,9 +14,10 @@ import { anchorTargetDefaultProps } from './defaultProps';
 export interface AnchorTargetProps extends TdAnchorTargetProps, StyledProps {}
 
 const AnchorTarget: FunctionComponent<AnchorTargetProps> = (props) => {
-  const { id, tag, children, className, style } = props;
-
   const { classPrefix } = useConfig();
+  const { FileCopyIcon } = useGlobalIcon({ FileCopyIcon: TdFileCopyIcon });
+
+  const { id, tag, children, className, style } = props;
 
   const tagClassName = classNames(`${classPrefix}-anchor__target`, className);
   const iconClassName = `${classPrefix}-anchor__copy`;

src/avatar/AvararGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import Avatar from './Avatar';
 import Popup from '../popup/Popup';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { AvatarContextProvider } from './AvatarContext';
 import { TdAvatarGroupProps } from './type';
 import { StyledProps } from '../common';

src/avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect, useContext, Ref } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import classNames from 'classnames';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import useCommonClassName from '../_util/useCommonClassName';
 import composeRefs from '../_util/composeRefs';

src/badge/Badge.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { StyledProps } from '../common';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { TdBadgeProps } from './type';
 import { badgeDefaultProps } from './defaultProps';
 

src/breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import BreadcrumbItem from './BreadcrumbItem';
 import { BreadcrumbProps } from './BreadcrumbProps';

src/breadcrumb/BreadcrumbItem.tsx

@@ -1,15 +1,19 @@
 import React, { forwardRef, useContext, useMemo } from 'react';
 import classNames from 'classnames';
-
-import { ChevronRightIcon } from 'tdesign-icons-react';
-import useConfig from '../_util/useConfig';
+import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react';
+import useConfig from '../hooks/useConfig';
+import useGlobalIcon from '../hooks/useGlobalIcon';
 import useCommonClassName from '../_util/useCommonClassName';
 
 import { BreadcrumbItemProps } from './BreadcrumbProps';
 import { BreadcrumbContext } from './BreadcrumbContext';
 import { breadcrumbItemDefaultProps } from './defaultProps';
 
 const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((props, ref) => {
+  const { classPrefix } = useConfig();
+  const commonClassNames = useCommonClassName();
+  const { ChevronRightIcon } = useGlobalIcon({ ChevronRightIcon: TdChevronRightIcon });
+
   const {
     children,
     separator,
@@ -27,9 +31,6 @@ const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((props, r
 
   const { maxItemWidthInContext, separator: separatorInContext } = useContext(BreadcrumbContext);
 
-  const { classPrefix } = useConfig();
-  const commonClassNames = useCommonClassName();
-
   const breadcrumbItemClassNames = classNames(`${classPrefix}-breadcrumb__item`);
   const textWrapperClassName = `${classPrefix}-breadcrumb__inner`;
   const textClassNames = classNames(`${classPrefix}-breadcrumb--text-overflow`, {

src/button/Button.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useMemo } from 'react';
 import classNames from 'classnames';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import useRipple from '../_util/useRipple';
 import Loading from '../loading';
 import { TdButtonProps } from './type';

src/calendar/CalendarCellComp.tsx

@@ -1,6 +1,6 @@
 import React, { MouseEvent } from 'react';
 import { CalendarCell, TdCalendarProps } from './type';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import usePrefixClass from './hooks/usePrefixClass';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
 import { blockName } from './_util';

src/calendar/hooks/usePrefixClass.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import useConfig from '../../_util/useConfig';
+import useConfig from '../../hooks/useConfig';
 
 export default function usePrefixClass() {
   const { classPrefix } = useConfig();

src/card/Card.tsx

@@ -5,7 +5,7 @@ import { TdCardProps } from './type';
 import Loading from '../loading';
 import { StyledProps } from '../common';
 
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import useCommonClassName from '../_util/useCommonClassName';
 import { cardDefaultProps } from './defaultProps';
 

src/cascader/Cascader.tsx

@@ -5,7 +5,7 @@ import Panel from './components/Panel';
 import SelectInput from '../select-input';
 import FakeArrow from '../common/FakeArrow';
 
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import useCommonClassName from '../_util/useCommonClassName';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
 

src/cascader/components/Item.tsx

@@ -1,11 +1,12 @@
 import React, { useRef, forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
-import { ChevronRightIcon } from 'tdesign-icons-react';
+import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react';
 
 import TLoading from '../../loading';
 import Checkbox from '../../checkbox/Checkbox';
 
-import useConfig from '../../_util/useConfig';
+import useConfig from '../../hooks/useConfig';
+import useGlobalIcon from '../../hooks/useGlobalIcon';
 import useCommonClassName from '../../_util/useCommonClassName';
 import useRipple from '../../_util/useRipple';
 
@@ -33,6 +34,7 @@ const Item = forwardRef(
       cascaderContext,
     } = props;
     const { classPrefix: prefix } = useConfig();
+    const { ChevronRightIcon } = useGlobalIcon({ ChevronRightIcon: TdChevronRightIcon });
     const COMPONENT_NAME = `${prefix}-cascader__item`;
     const itemRef = useRef();
     useRipple(ref || itemRef);

src/cascader/components/Panel.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import Item from './Item';
 
-import useConfig from '../../_util/useConfig';
+import useConfig from '../../hooks/useConfig';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import { getPanels } from '../core/helper';
 import { expendClickEffect, valueChangeEffect } from '../core/effect';

src/checkbox/CheckboxGroup.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import isNumber from 'lodash/isNumber';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { CheckContext, CheckContextValue } from '../common/Check';
 import { CheckboxOption, CheckboxOptionObj, TdCheckboxGroupProps, TdCheckboxProps } from './type';
 import { StyledProps } from '../common';
@@ -151,9 +151,9 @@ const CheckboxGroup = (props: CheckboxGroupProps) => {
                   const vs = v as CheckboxOptionObj;
                   // CheckAll 的 checkBox 不存在 value,故用 checkAll_index 来保证尽量不和用户的 value 冲突.
                   return vs.checkAll ? (
-                    <Checkbox {...v} key={`checkAll_${index}`} indeterminate={indeterminate} />
+                    <Checkbox {...vs} key={`checkAll_${index}`} indeterminate={indeterminate} />
                   ) : (
-                    <Checkbox {...v} key={index} disabled={vs.disabled || disabled} />
+                    <Checkbox {...vs} key={index} disabled={vs.disabled || disabled} />
                   );
                 }
                 default:

src/collapse/Collapse.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { TdCollapseProps, CollapsePanelValue, CollapseValue } from './type';
 import { StyledProps } from '../common';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import useControlled from '../hooks/useControlled';
 import CollapsePanel from './CollapsePanel';

src/collapse/CollapsePanel.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { useCollapseContext } from './CollapseContext';
 import FakeArrow from '../common/FakeArrow';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { TdCollapsePanelProps } from './type';
 import { StyledProps } from '../common';
 import { collapsePanelDefaultProps } from './defaultProps';

src/color-picker/components/panel/header.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CloseIcon } from 'tdesign-icons-react';
+import { CloseIcon as TdCloseIcon } from 'tdesign-icons-react';
+import useGlobalIcon from '../../../hooks/useGlobalIcon';
 import { COLOR_MODES } from '../../const';
 import Radio, { RadioValue } from '../../../radio';
 import { TdColorModes } from '../../interface';
@@ -14,6 +15,7 @@ export interface ColorPanelHeaderProps extends TdColorPickerProps {
 }
 
 const Header = (props: ColorPanelHeaderProps) => {
+  const { CloseIcon } = useGlobalIcon({ CloseIcon: TdCloseIcon });
   const { baseClassName, mode = 'monochrome', colorModes, togglePopup, closeBtn = true, onModeChange } = props;
 
   const handleClosePopup = () => {

src/color-picker/components/panel/swatches.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { DeleteIcon, AddIcon } from 'tdesign-icons-react';
+import { DeleteIcon as TdDeleteIcon, AddIcon as TdAddIcon } from 'tdesign-icons-react';
+import useGlobalIcon from '../../../hooks/useGlobalIcon';
 import Color from '../../../_common/js/color-picker/color';
 import { TdColorBaseProps } from '../../interface';
 import useCommonClassName from '../../../_util/useCommonClassName';
@@ -24,6 +25,7 @@ const Swatches = (props: TdColorSwathcesProps) => {
     onSetColor,
     handleAddColor,
   } = props;
+  const { DeleteIcon, AddIcon } = useGlobalIcon({ DeleteIcon: TdDeleteIcon, AddIcon: TdAddIcon });
   const swatchesClass = `${baseClassName}__swatches`;
   const { STATUS: statusClassNames } = useCommonClassName();
   const isEqualCurrentColor = (color: string) => Color.compare(color, props.color.css);

src/color-picker/hooks/useClassname.ts

@@ -1,4 +1,4 @@
-import useConfig from '../../_util/useConfig';
+import useConfig from '../../hooks/useConfig';
 
 const useClassname = () => {
   const { classPrefix } = useConfig();

src/comment/Comment.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import { StyledProps } from '../common';
 import { TdCommentProps } from './type';
 import { commentDefaultProps } from './defaultProps';

src/common/Check.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import isBoolean from 'lodash/isBoolean';
 import { omit } from '../_util/helper';
 import { StyledProps } from '../common';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
 import { TdCheckboxProps } from '../checkbox/type';