refactor: 移除icon-park完全使用antd-icon

.eslintignore

@@ -5,4 +5,5 @@ public
 *.d.ts
 coverage/
 dist/
-coverage
+coverage
+**/*.ldicons.js

packages/app/package.json

@@ -13,7 +13,6 @@
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@hookform/resolvers": "^3.1.0",
-    "@icon-park/react": "^1.4.2",
     "@tanstack/react-query": "^4.29.1",
     "@tanstack/react-table": "^8.9.1",
     "ahooks": "^3.7.7",

packages/app/src/apis/mock.ts

@@ -7,7 +7,7 @@ export function generateMock() {
     {
       msg: '200',
       data: [
-        {id: '1', pId: '0', name: '系统设置', img: 'settingMenuicon', url: '.'},
+        {id: '1', pId: '0', name: '系统设置', img: 'menu-shezhi', url: '.'},
         {id: '3', pId: '1', name: '用户管理', img: '', url: '/user'},
         {id: '4', pId: '1', name: '角色管理', img: '', url: '/role'},
         {id: '2', pId: '1', name: '菜单管理', img: '', url: '/menu'},
@@ -33,7 +33,7 @@ export function generateMock() {
             id: '@increment(1)',
             name: '@ctitle(2,4)',
             url: '/menu',
-            img: 'mainMenuIcon',
+            img: 'menu-shezhi',
             modifyUser: '@cname',
             modifyTime: '@datetime',
             pId: '0',

packages/app/src/components/filter-button-group/index.tsx

@@ -1,6 +1,6 @@
 import {Space, Button} from 'antd';
 import {FC} from 'react';
-import {Search, Filter, Clear} from '@icon-park/react';
+import {LDIcons} from '@components';
 
 type Props = {
   onSearch: () => void;
@@ -25,7 +25,7 @@ const LDFilterButtonGroup: FC<Props> = function({
           type="primary"
           onClick={onSearch}
           data-testid="search_btn"
-          icon={<Search theme="outline" className="anticon" />}
+          icon={<LDIcons type="ld-btn-sousuo" />}
           htmlType="submit"
         >
           查询
@@ -34,7 +34,7 @@ const LDFilterButtonGroup: FC<Props> = function({
           type="primary"
           danger
           onClick={onReset}
-          icon={<Clear theme="outline" className="anticon" />}
+          icon={<LDIcons type="ld-btn-delete" />}
           htmlType="button"
           data-testid="reset_btn"
         >
@@ -44,7 +44,7 @@ const LDFilterButtonGroup: FC<Props> = function({
           <Button
             type="default"
             onClick={onScreen}
-            icon={<Filter theme="outline" className="anticon" />}
+            icon={<LDIcons type="ld-btn-filter" />}
             htmlType="button"
             data-testid="screen_btn"
           >

packages/app/src/components/iconfont-icons/index.tsx

@@ -0,0 +1,27 @@
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import {createFromIconfontCN} from '@ant-design/icons';
+import {FC} from 'react';
+import menuIcons from '@assets/icons/menu.ldicons';
+import buttonIcons from '@assets/icons/ldButton.ldicons';
+
+// 图标js放在public下的icons中
+// 放入后全局替换fill="#\d*" 将填充颜色清空
+const Icons = createFromIconfontCN({
+  scriptUrl: [
+    buttonIcons,
+    menuIcons,
+  ],
+});
+
+type Props = {
+  type: string;
+};
+
+const LDIcons: FC<Props> = function({type}) {
+  return <Icons type={type} />;
+};
+
+export default LDIcons;

packages/app/src/components/index.ts

@@ -13,9 +13,8 @@ export {default as LDTable} from './table';
 export * from './table';
 export {default as LDTableBasicProvider} from './table-basic-provider';
 export {default as LDTableSettingProvider} from './table-setting-provider';
-export {default as LDMenuIcon} from './menu-icon';
-export * from './menu-icon';
 export {default as LDTableWrapper} from './table-wrapper';
 export {default as LDTableTool} from './table-tool';
 export {default as LDTableButton} from './table-button';
 export {default as LDFilterSelectorModal} from './filter-selector-modal';
+export {default as LDIcons} from './iconfont-icons';

packages/app/src/components/menu-icon/index.tsx

@@ -1,18 +0,0 @@
-import {FC} from 'react';
-import {HomeTwo} from '@icon-park/react';
-
-export const menuIconMap = new Map<string, typeof HomeTwo>();
-
-type Props = {
-  name: string;
-};
-
-const LDMenuIcon: FC<Props> = function({name}) {
-  const Icon = menuIconMap.get(name);
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return <Icon className="anticon" theme="outline" />;
-};
-
-export default LDMenuIcon;

packages/app/src/components/modal/Modal.tsx

@@ -1,10 +1,10 @@
 import {FC, FormEventHandler, ReactNode, useEffect} from 'react';
 import ReactModal from 'react-modal';
-import {Close} from '@icon-park/react';
 import ModalButton from './Button';
 import {Space} from 'antd';
 import addIcon from '@assets/images/dialog/add.svg';
 import editIcon from '@assets/images/dialog/edit.svg';
+import {CloseOutlined} from '@ant-design/icons';
 
 type ReactModalStyle = ReactModal.Styles;
 
@@ -72,7 +72,7 @@ const LDModal: FC<Props> = function(props) {
           <h3>{title}</h3>
         </div>
 
-        <Close className="ld-dialog-close" onClick={onClose} />
+        <CloseOutlined className="ld-dialog-close" onClick={onClose} />
 
         <div className="ld-dialog-decorate">
           <span className="ld-dialog-decorate-icon1" />

packages/app/src/components/modal/PageModal.tsx

@@ -1,6 +1,6 @@
 import ReactModal from 'react-modal';
-import {Close} from '@icon-park/react';
 import {FC, PropsWithChildren} from 'react';
+import {CloseOutlined} from '@ant-design/icons';
 
 const styles: ReactModal.Styles = {
   content: {
@@ -35,7 +35,7 @@ const LDPageModal: FC<PropsWithChildren<Props>> = function(props) {
     >
       <section className="ld-page-dialog" data-testid={props['data-testid']}>
         <div className="ld-page-dialog-close">
-          <Close
+          <CloseOutlined
             className="ld-page-dialog-close-icon"
             onClick={onClose}
           />

packages/app/src/components/modal/index.css

@@ -39,13 +39,13 @@
   top: 22px;
   right: 22px;
   z-index: 2;
-  font-size: 24px;
-  color: #d7d7d7;
+  font-size: var(--title-font-size);
+  color: var(--tip-font-color);
   cursor: pointer;
   transition: color 100ms linear;
 
   &:hover {
-    color: #999;
+    color: var(--font-color);
   }
 }
 
@@ -155,13 +155,13 @@
 
 .ld-page-dialog-close-icon {
   z-index: 2;
-  font-size: 24px;
-  color: #d7d7d7;
+  font-size: var(--title-font-size);
+  color: var(--tip-font-color);
   cursor: pointer;
   transition: color 100ms linear;
 
   &:hover {
-    color: #999;
+    color: var(--font-color);
   }
 }
 

packages/app/src/components/table-tool/index.tsx

@@ -1,12 +1,4 @@
 import './index.css';
-import {
-  Download,
-  FileAdditionOne,
-  FileExcel,
-  Refresh,
-  Save,
-  Upload,
-} from '@icon-park/react';
 import {MENU_STORAGE} from '@utils';
 import {Button, Space, Upload as AntUpload, UploadProps} from 'antd';
 import {useLocation} from 'react-router-dom';
@@ -20,6 +12,14 @@ import {
   useContextSection,
 } from '@hooks';
 import {useSaveSetting} from './hooks';
+import {
+  DownloadOutlined,
+  FileAddOutlined,
+  FileExcelOutlined,
+  ReloadOutlined,
+  SaveOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
 
 type Props = {
   onAdd?: () => void;
@@ -72,59 +72,49 @@ const LDTableTool: FC<PropsWithChildren<Props>> = function({
     <section className="ld-table-tool">
       <h1 className="ld-table-tool-title">{tableTitle}</h1>
       <Space>
-        {onAdd && (
-          <Button
-            type="primary"
-            onClick={onAdd}
-            data-testid="add_btn"
-            icon={<FileAdditionOne theme="outline" className="anticon" />}
-          >
-            新增
-          </Button>
-        )}
-        {onRefresh && (
-          <Button
-            data-testid="refresh_btn"
-            onClick={onRefresh}
-            loading={isRefreshing}
-            icon={<Refresh theme="outline" className="anticon" />}
-          >
-            刷新
-          </Button>
-        )}
-        {onDownload && (
-          <Button
-            onClick={onDownload}
-            icon={<Download theme="outline" className="anticon" />}
-          >
-            模板下载
-          </Button>
-        )}
-        {uploadProps && (
-          <AntUpload {...uploadProps}>
-            <Button
-              loading={isUploading}
-              icon={<Upload theme="outline" className="anticon" />}
-            >
-              模板上传
-            </Button>
-          </AntUpload>
-        )}
-        {onExport && (
+        {onAdd && <Button
+          type="primary"
+          onClick={onAdd}
+          data-testid="add_btn"
+          icon={<FileAddOutlined />}
+        >
+          新增
+        </Button>}
+        <Button
+          data-testid="refresh_btn"
+          onClick={onRefresh}
+          loading={isRefreshing}
+          icon={<ReloadOutlined />}
+        >
+          刷新
+        </Button>
+        {onDownload && <Button
+          onClick={onDownload}
+          icon={<DownloadOutlined />}
+        >
+          模板下载
+        </Button>}
+        {uploadProps && <AntUpload {...uploadProps}>
           <Button
-            data-testid="export_btn"
-            onClick={onExport(tableTitle)}
-            loading={isExporting}
-            icon={<FileExcel theme="outline" className="anticon" />}
+            loading={isUploading}
+            icon={<UploadOutlined />}
           >
-            导出
+            模板上传
           </Button>
-        )}
+        </AntUpload>}
+        {onExport && <Button
+          data-testid="export_btn"
+          onClick={onExport(tableTitle)}
+          loading={isExporting}
+          icon={<FileExcelOutlined />}
+        >
+          导出
+        </Button>}
         <Button
           data-testid="save_setting_btn"
           loading={isSaveing}
           onClick={onSaveClick}
-          icon={<Save theme="outline" className="anticon" />}
+          icon={<SaveOutlined />}
         >
           保存配置
         </Button>

packages/app/src/global.d.ts

@@ -60,12 +60,3 @@ declare module '*.module.css' {
   export default classes;
 }
 
-declare module '*.module.scss' {
-  const classes: {readonly [key: string]: string};
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: {readonly [key: string]: string};
-  export default classes;
-}

packages/app/src/index.tsx

@@ -1,5 +1,4 @@
 import 'react-contexify/ReactContexify.css';
-import '@icon-park/react/styles/index.css';
 import '@styles/index.css';
 import {createRoot} from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
@@ -8,9 +7,8 @@ import {StrictMode, Suspense} from 'react';
 import {QUERY_CLIENT} from '@utils';
 import routes from '@routes';
 import {ConfigProvider, ThemeConfig, App} from 'antd';
-import {LDLoading, menuIconMap} from '@components';
+import {LDLoading} from '@components';
 import antdZh from 'antd/locale/zh_CN';
-import {HomeTwo, SettingTwo} from '@icon-park/react';
 
 const root = createRoot(document.getElementById('root')!);
 
@@ -24,9 +22,6 @@ const antdTheme: ThemeConfig = {
   },
 };
 
-menuIconMap.set('mainMenuIcon', HomeTwo);
-menuIconMap.set('settingMenuicon', SettingTwo);
-
 root.render(
   <StrictMode>
     <Suspense fallback={<LDLoading tip="正在加载中" width="100vw" height="100vh" />}>

packages/app/src/pages/home/fullscreen/index.tsx

@@ -1,7 +1,9 @@
-import {FC} from 'react';
+import {CSSProperties, FC} from 'react';
 import css from './index.module.css';
 import {useFullscreen} from 'ahooks';
-import {FullScreenTwo, OffScreenTwo} from '@icon-park/react';
+import {FullscreenOutlined, FullscreenExitOutlined} from '@ant-design/icons';
+
+const iconStyle: CSSProperties = {fontSize: 'var(--title-font-size)', color: 'var(--font-color)'};
 
 const FullScreenBtn: FC = function() {
   const [isFullscreen, {toggleFullscreen}] = useFullscreen(document.body);
@@ -9,9 +11,9 @@ const FullScreenBtn: FC = function() {
   return (
     <section className={css.fullscreenBtn} onClick={toggleFullscreen}>
       {!isFullscreen ? (
-        <FullScreenTwo theme="outline" size="20" fill="#999" />
+        <FullscreenOutlined style={iconStyle} />
       ) : (
-        <OffScreenTwo theme="outline" size="20" fill="#999" />
+        <FullscreenExitOutlined style={iconStyle} />
       )}
     </section>
   );

packages/app/src/pages/home/menu/hooks.tsx

@@ -26,7 +26,7 @@ export function useMenu() {
             page: 1,
             limit: 0,
             orderBy: '0',
-            img: 'mainMenuIcon',
+            img: 'menu-shouye',
           },
           ...data.data,
         ];

packages/app/src/pages/home/menu/index.module.css

@@ -64,22 +64,20 @@
 }
 
 .slider-btn {
-  position: sticky;
-  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   height: 40px;
-  padding: 0 20px;
+  padding: 0 16px 0 20px;
   background-color: #fff !important;
 }
 
 .slider-btn-collapsed {
-  padding: 0 32px;
+  padding-right: 34px;
 }
 
 .slider-btn-icon {
-  font-size: 22px;
+  font-size: 16px;
   cursor: pointer;
   transition: all 200ms linear;
 }

packages/app/src/pages/home/menu/index.tsx

@@ -2,7 +2,7 @@ import {FC} from 'react';
 import {Menu as AntdMenu, Layout} from 'antd';
 import {useCollapsedMenu, useMenu, useMenuState} from './hooks';
 import css from './index.module.css';
-import {MenuUnfoldOne} from '@icon-park/react';
+import {MenuFoldOutlined} from '@ant-design/icons';
 import classNames from 'classnames';
 
 const Menu: FC = function() {
@@ -17,9 +17,7 @@ const Menu: FC = function() {
           [css.sliderBtnCollapsed]: collapsed,
         })}
       >
-        <MenuUnfoldOne
-          theme="outline"
-          fill="#BDBBBB"
+        <MenuFoldOutlined
           className={classNames(css.sliderBtnIcon, 'ant-menu-item-icon', {
             [css.sliderBtnIconCollapsed]: collapsed,
           })}

packages/app/src/pages/menu/table/hooks.tsx

@@ -1,7 +1,7 @@
 import {deleteMenu} from '@apis';
 import {
   LDColumnsType,
-  LDMenuIcon,
+  LDIcons,
   LDTableButton,
   modifyDataColumns,
 } from '@components';
@@ -31,7 +31,7 @@ const tableColumns: LDColumnsType<MenuListData>[] = [
     width: TABLE_CELL_WIDTH.small,
     align: 'center',
     render({img}) {
-      return <LDMenuIcon name={img} />;
+      return <LDIcons type={img} />;
     },
   },
   ...modifyDataColumns,

packages/app/src/utils/sort-menu/index.tsx

@@ -1,4 +1,4 @@
-import {LDMenuIcon} from '@components';
+import {LDIcons} from '@components';
 import {UserBasicMenuData} from '@models';
 import {ReactNode} from 'react';
 
@@ -23,7 +23,7 @@ export function sortMenu(menus: UserBasicMenuData[]) {
       label: name,
       pid: pId,
       url,
-      icon: img && <LDMenuIcon name={img} />,
+      icon: img && <LDIcons type={img} />,
     };
 
     if (pId === '0') {

packages/webpack/config/optimization.ts

@@ -51,6 +51,13 @@ const optimization: Configuration['optimization'] = {
         priority: 10,
         reuseExistingChunk: true,
       },
+      antd: {
+        name: 'antd',
+        chunks: 'all',
+        test: /[\\/]node_modules[\\/](antd|@ant-design|rc)/,
+        priority: 10,
+        reuseExistingChunk: true,
+      },
     },
   },
 };

packages/webpack/config/plugins.ts

@@ -40,7 +40,7 @@ const plugins: Configuration['plugins'] = [
   new ESLintWebpackPlugin({
     extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
     context: srcPath,
-    exclude: 'node_modules',
+    exclude: ['assets/icons'],
     cache: true,
     cacheLocation: resolve(rootPath, '.temp-cache/.eslintcache'),
   }),

packages/webpack/config/rules.ts

@@ -56,6 +56,10 @@ function getStyleLoaders(cssOptions: Record<string, unknown>) {
 const rules = [
   {
     oneOf: [
+      {
+        test: /\.ldicons\.js$/,
+        type: 'asset/resource',
+      },
       {
         test: cssRegex,
         exclude: cssModuleRegex,

pnpm-lock.yaml

@@ -125,9 +125,6 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.1.0
         version: 3.1.0(react-hook-form@7.44.3)
-      '@icon-park/react':
-        specifier: ^1.4.2
-        version: 1.4.2(react-dom@18.2.0)(react@18.2.0)
       '@tanstack/react-query':
         specifier: ^4.29.1
         version: 4.29.1(react-dom@18.2.0)(react@18.2.0)
@@ -1384,17 +1381,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@icon-park/react@1.4.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+MtQLjNiRuia3fC/NfpSCTIy5KH5b+NkMB9zYd7p3R4aAIK61AjK0OSraaICJdkKooU9jpzk8m0fY4g9A3JqhQ==}
-    engines: {node: '>= 8.0.0', npm: '>= 5.0.0'}
-    peerDependencies:
-      react: '>=16.9'
-      react-dom: '>=16.9'
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@istanbuljs/schema@0.1.3:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}