feat: use dtinsight/react-icons replace ant-design/icons

fix #562

Author: LuckyFBB

package.json

@@ -103,15 +103,16 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-test-renderer": "^18.2.0",
-        "standard-version": "^9.5.0",
         "resize-observer-polyfill": "^1.5.1",
+        "standard-version": "^9.5.0",
         "stylelint": "^14.9.1",
         "ts-jest": "^29.0.3",
         "typescript": "~4.5.2"
     },
     "dependencies": {
         "@ant-design/icons": "^4.7.0",
         "@dtinsight/dt-utils": "^1.3.1",
+        "@dtinsight/react-icons": "^1.0.0",
         "@handsontable/react": "2.1.0",
         "antd": "4.22.5",
         "classnames": "^2.2.6",

pnpm-lock.yaml

@@ -1,14 +1,14 @@
 import React from 'react';
-import { PauseCircleOutlined, PieChartOutlined } from '@ant-design/icons';
+import { PauseOutlined, PieChartFilled } from '@dtinsight/react-icons';
 import { BlockHeader } from 'dt-react-component';
 
 export default () => {
     return (
         <>
             <BlockHeader title="分类标题" />
             <BlockHeader title="分类标题" addonBefore={''} />
-            <BlockHeader title="分类标题" addonBefore={<PieChartOutlined />} />
-            <BlockHeader title="分类标题" addonBefore={<PauseCircleOutlined />} />
+            <BlockHeader title="分类标题" addonBefore={<PieChartFilled />} />
+            <BlockHeader title="分类标题" addonBefore={<PauseOutlined />} />
         </>
     );
 };

src/blockHeader/demos/addonBefore.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { PieChartOutlined } from '@ant-design/icons';
+import { PieChartOutlined } from '@dtinsight/react-icons';
 import { Radio, Space, Switch } from 'antd';
 import { BlockHeader } from 'dt-react-component';
 import { SizeType } from 'dt-react-component/blockHeader';

src/blockHeader/demos/basic.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useState } from 'react';
-import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
+import { QuestionOutlined, UpOutlined } from '@dtinsight/react-icons';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 
@@ -115,7 +115,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     {tooltipProps?.title ? (
                         <div className={`title__tooltip`}>
                             <Tooltip {...tooltipProps}>
-                                <QuestionCircleOutlined />
+                                <QuestionOutlined />
                             </Tooltip>
                         </div>
                     ) : null}

src/blockHeader/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { LikeOutlined } from '@ant-design/icons';
+import { ThumbsUpOutlined } from '@dtinsight/react-icons';
 import { Button } from 'antd';
 import { Chat, Flex } from 'dt-react-component';
 
@@ -44,7 +44,7 @@ export default function () {
                 codeBlock={{
                     convert,
                 }}
-                messageIcons={() => <LikeOutlined className="dtc__message__icon" />}
+                messageIcons={() => <ThumbsUpOutlined className="dtc__message__icon" />}
                 components={{
                     a: ({ children }) => (
                         <Button

src/chat/demos/basic.tsx

@@ -2,7 +2,7 @@
  * background: '#f6f7f9'
  */
 import React from 'react';
-import { PlusCircleOutlined } from '@ant-design/icons';
+import { PlusCircleOutlined } from '@dtinsight/react-icons';
 import { Chat } from 'dt-react-component';
 
 const children = `

src/chat/demos/codeBlock.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { LeftOutlined, RightOutlined } from '@dtinsight/react-icons';
 
 import './index.scss';
 

src/chat/pagination/index.tsx

@@ -101,7 +101,7 @@ export default () => {
 import React, { useState } from 'react';
 import { CollapsibleActionItems } from 'dt-react-component';
 import { Table, message, Popconfirm } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@dtinsight/react-icons';
 
 export default () => {
     const [dataSource, setDataSource] = useState([

src/collapsibleActionItems/index.md

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { EllipsisOutlined } from '@ant-design/icons';
+import { EllipsisTableOutlined } from '@dtinsight/react-icons';
 import { Button, ButtonProps, Divider, Dropdown, DropDownProps, Menu } from 'antd';
 import classNames from 'classnames';
 
@@ -30,7 +30,7 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
         maxCount = 3,
         className,
         divider = <Divider type="vertical" />,
-        collapseIcon = <EllipsisOutlined />,
+        collapseIcon = <EllipsisTableOutlined />,
         dropdownProps,
         buttonProps,
         style,

src/collapsibleActionItems/index.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, useEffect, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined } from '@dtinsight/react-icons';
 import { Alert, AlertProps, Spin, Tabs } from 'antd';
 import classNames from 'classnames';
 import { omit } from 'lodash-es';

src/drawer/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusCircleOutlined } from '@dtinsight/react-icons';
 import { InternalNamePath } from 'antd/lib/form/interface';
 import classnames from 'classnames';
 

src/filterRules/ruleController/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@dtinsight/react-icons';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -18,13 +18,13 @@ describe('test Fullscreen', () => {
         const customIcon = {
             fullIcon: (
                 <>
-                    <ArrowsAltOutlined />
+                    <FullscreenOutlined />
                     全屏
                 </>
             ),
             exitFullIcon: (
                 <>
-                    <ShrinkOutlined />
+                    <FullscreenExitOutlined />
                     退出全屏
                 </>
             ),

src/fullscreen/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@dtinsight/react-icons';
 import { Fullscreen } from 'dt-react-component';
 
 export default () => {
@@ -14,13 +14,13 @@ export default () => {
             iconStyle={iconStyle}
             fullIcon={
                 <div style={{ cursor: 'pointer' }}>
-                    <ArrowsAltOutlined />
+                    <FullscreenOutlined />
                     全屏
                 </div>
             }
             exitFullIcon={
                 <div style={{ cursor: 'pointer' }}>
-                    <ShrinkOutlined />
+                    <FullscreenExitOutlined />
                     退出全屏
                 </div>
             }

src/fullscreen/demos/custom.tsx

@@ -1,3 +1,5 @@
+import '@dtinsight/react-icons/dist/index.css';
+
 export { default as BlockHeader } from './blockHeader';
 export { default as Catalogue } from './catalogue';
 export { default as Chat } from './chat';

src/index.ts

@@ -1,21 +1,21 @@
 import React from 'react';
-import { SketchOutlined } from '@ant-design/icons';
+import { TargetFilled } from '@dtinsight/react-icons';
 import { Space } from 'antd';
 import { StatusTag } from 'dt-react-component';
 
 export default () => {
     return (
         <Space direction="vertical">
-            <StatusTag color="green" type="outline" icon={<SketchOutlined />}>
+            <StatusTag color="green" type="outline" icon={<TargetFilled />}>
                 成功
             </StatusTag>
-            <StatusTag color="blue" icon={<SketchOutlined />}>
+            <StatusTag color="blue" icon={<TargetFilled />}>
                 运行中
             </StatusTag>
-            <StatusTag color="yellow" type="fill" icon={<SketchOutlined />}>
+            <StatusTag color="yellow" type="fill" icon={<TargetFilled />}>
                 运行中
             </StatusTag>
-            <StatusTag color="#2f10fb" type="fill" icon={<SketchOutlined />}>
+            <StatusTag color="#2f10fb" type="fill" icon={<TargetFilled />}>
                 运行中
             </StatusTag>
         </Space>

src/statusTag/demos/icon.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import { SpinOutlined } from '@dtinsight/react-icons';
 import { Spin } from 'antd';
 import classNames from 'classnames';
 
@@ -107,7 +107,11 @@ const StatusTag: React.FC<IStatusTagProps> = function StatusTag(props) {
             {loading ? (
                 <Spin
                     spinning
-                    indicator={<LoadingOutlined className={`${prefixCls}__icon`} />}
+                    indicator={
+                        <SpinOutlined
+                            className={`${prefixCls}__icon ${prefixCls}__icon--loading`}
+                        />
+                    }
                     size="small"
                 />
             ) : (

src/statusTag/index.tsx

@@ -13,7 +13,7 @@ $colors: (
         bg: #E7FBF7,
     ),
     "gray": (
-        color:  #B1B4C5,
+        color: #B1B4C5,
         bg: #F5F5F8,
     ),
     "red": (
@@ -34,6 +34,15 @@ $colors: (
     ),
 );
 
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .#{$card_prefix} {
     display: flex;
     align-items: center;
@@ -65,6 +74,9 @@ $colors: (
             height: 6px;
             border-radius: 50%;
         }
+        &--loading {
+            animation: spin 1s linear infinite;
+        }
     }
     &__text {
         font-size: 12px;

src/statusTag/style.scss

@@ -1,5 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import { QuestionCircleOutlined } from '@ant-design/icons';
+import { QuestionOutlined } from '@dtinsight/react-icons';
 import { Table as InternalTable, Tooltip } from 'antd';
 import type { LabelTooltipType, WrapperTooltipProps } from 'antd/lib/form/FormItemLabel';
 import type { ColumnType as PrimitiveColumnType, TableProps } from 'antd/lib/table';
@@ -51,7 +51,7 @@ function convertColumns(columns?: ColumnType[]): PrimitiveColumnType<any>[] {
         const tooltipProps = toTooltipProps(tooltip);
         let tooltipNode: React.ReactNode | null = null;
         if (tooltipProps) {
-            const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
+            const { icon = <QuestionOutlined />, ...restTooltipProps } = tooltipProps;
             tooltipNode = (
                 <Tooltip {...restTooltipProps}>
                     {React.cloneElement(icon, {