@hsu-react/ui 0.0.21 → 0.0.22

package/es/components/Button/index.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as AntdButtonProps } from "antd";
 import React from "react";
-import { ChakraButtonProps } from "./ChakraButton";
+import type { ChakraButtonProps } from "./ChakraButton";
 export type { ChakraButtonProps };
 export interface ButtonProps extends AntdButtonProps {
     hasPermi?: string[];

package/es/components/Button/index.js

@@ -1,19 +1,33 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Button as AntdButton } from "antd";
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import ChakraButton from "./ChakraButton";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
+ * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
+ * on-demand loading: the type goes through `import type` (erased at compile time), and the
+ * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ */
+var InternalChakraButton = /*#__PURE__*/lazy(function () {
+  return import("./ChakraButton");
+});
+var ChakraButton = function ChakraButton(props) {
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: null,
+    children: /*#__PURE__*/_jsx(InternalChakraButton, _objectSpread({}, props))
+  });
+};
 // forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
 // preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
 var InternalButton = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/es/components/Select/IconSelect/index.js

@@ -1,4 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -14,28 +16,45 @@ import Icon from "../../Icon";
 import Input from "../../Input";
 import styles from "./index.module.scss";
 import classNames from "classnames";
-import antDesignIcons from "@iconify/json/json/ant-design.json";
-import elementPlusIcons from "@iconify/json/json/ep.json";
-import fontAwesome4Icons from "@iconify/json/json/fa.json";
-import fontAwesome5SolidIcons from "@iconify/json/json/fa-solid.json";
+
+/**
+ * The four selectable icon sets are loaded on demand.
+ *
+ * Together these JSON files weigh about 1.9 MB, and a static import drags them into the
+ * initial bundle along with IconSelect:
+ *
+ *   FormItem → FormSelect → IconSelect → @iconify/json/json/*.json
+ *
+ * Only pages like menu management ever actually open the icon picker, so the set metadata
+ * and the icon-name list are split apart: label / name stay static (the Tabs must render
+ * immediately), and the matching set is fetched for the current tab once the popover opens.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var icons = [{
+var ICON_SETS = [{
   label: "Ant Design",
   name: "ant-design",
-  icons: Object.keys(antDesignIcons.icons)
+  load: function load() {
+    return import("@iconify/json/json/ant-design.json");
+  }
 }, {
   label: "Element Plus",
   name: "ep",
-  icons: Object.keys(elementPlusIcons.icons)
+  load: function load() {
+    return import("@iconify/json/json/ep.json");
+  }
 }, {
   label: "Font Awesome 4",
   name: "fa",
-  icons: Object.keys(fontAwesome4Icons.icons)
+  load: function load() {
+    return import("@iconify/json/json/fa.json");
+  }
 }, {
   label: "Font Awesome 5 Solid",
   name: "fa-solid",
-  icons: Object.keys(fontAwesome5SolidIcons.icons)
+  load: function load() {
+    return import("@iconify/json/json/fa-solid.json");
+  }
 }];
 var IconSelect = function IconSelect(props) {
   var _props$value = props.value,
@@ -58,13 +77,22 @@ var IconSelect = function IconSelect(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     activeIcon = _useState8[0],
     setActiveIcon = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    open = _useState10[0],
+    setOpen = _useState10[1];
+  /** Loaded icon-name lists, cached by set name */
+  var _useState11 = useState({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    iconNames = _useState12[0],
+    setIconNames = _useState12[1];
   useEffect(function () {
-    setCurrentTab(icons[0].name);
+    setCurrentTab(ICON_SETS[0].name);
   }, []);
   useEffect(function () {
     if (value && value !== _value) {
       setValue(value);
-      if (icons.find(function (item) {
+      if (ICON_SETS.find(function (item) {
         return item.name === value.split(":")[0];
       })) {
         setCurrentTab(value.split(":")[0]);
@@ -72,6 +100,28 @@ var IconSelect = function IconSelect(props) {
       }
     }
   }, [value, _value]);
+
+  // Only fetch the current tab's icon names once the popover is open, and only once per set
+  useEffect(function () {
+    if (!open || !currentTab || iconNames[currentTab]) return;
+    var target = ICON_SETS.find(function (item) {
+      return item.name === currentTab;
+    });
+    if (!target) return;
+    var alive = true;
+    target.load().then(function (module) {
+      var _default;
+      if (!alive) return;
+      var json = (_default = module.default) !== null && _default !== void 0 ? _default : module;
+      setIconNames(function (prev) {
+        var _json$icons;
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, currentTab, Object.keys((_json$icons = json.icons) !== null && _json$icons !== void 0 ? _json$icons : {})));
+      });
+    });
+    return function () {
+      alive = false;
+    };
+  }, [open, currentTab, iconNames]);
   var _onChange = function _onChange(value) {
     setValue(value);
     onChange === null || onChange === void 0 || onChange(value);
@@ -85,6 +135,8 @@ var IconSelect = function IconSelect(props) {
       placement: "bottom",
       trigger: "click",
       zIndex: 1000,
+      open: open,
+      onOpenChange: setOpen,
       content: /*#__PURE__*/_jsxs("div", {
         className: styles.popoverContent,
         children: [/*#__PURE__*/_jsx(Input, {
@@ -100,16 +152,16 @@ var IconSelect = function IconSelect(props) {
           onChange: function onChange(key) {
             setCurrentTab(key);
           },
-          items: icons === null || icons === void 0 ? void 0 : icons.map(function (type) {
-            var _type$icons;
+          items: ICON_SETS.map(function (type) {
+            var _iconNames$type$name;
             return {
               label: type.label,
               key: type.name,
               children: /*#__PURE__*/_jsx("div", {
                 className: classNames(styles.typeIcon),
-                children: (_type$icons = type.icons) === null || _type$icons === void 0 || (_type$icons = _type$icons.filter(function (i) {
+                children: ((_iconNames$type$name = iconNames[type.name]) !== null && _iconNames$type$name !== void 0 ? _iconNames$type$name : []).filter(function (i) {
                   return i.includes(search);
-                })) === null || _type$icons === void 0 ? void 0 : _type$icons.map(function (item) {
+                }).map(function (item) {
                   return /*#__PURE__*/_jsx(Tooltip, {
                     title: type.name + ":" + item,
                     placement: "top",

package/lib/components/Button/index.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as AntdButtonProps } from "antd";
 import React from "react";
-import { ChakraButtonProps } from "./ChakraButton";
+import type { ChakraButtonProps } from "./ChakraButton";
 export type { ChakraButtonProps };
 export interface ButtonProps extends AntdButtonProps {
     hasPermi?: string[];

package/lib/components/Button/index.js

@@ -5,13 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _usePermissions = _interopRequireDefault(require("../../hooks/usePermissions"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _ChakraButton = _interopRequireDefault(require("./ChakraButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
+ * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
+ * on-demand loading: the type goes through `import type` (erased at compile time), and the
+ * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ */
+const InternalChakraButton = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./ChakraButton"))));
+const ChakraButton = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: null,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalChakraButton, {
+    ...props
+  })
+});
 // forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
 // preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
 const InternalButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -40,5 +54,5 @@ const InternalButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   });
 });
 const Button = InternalButton;
-Button.Chakra = _ChakraButton.default;
+Button.Chakra = ChakraButton;
 var _default = exports.default = Button;

package/lib/components/Select/IconSelect/index.js

@@ -10,30 +10,37 @@ var _Icon = _interopRequireDefault(require("../../Icon"));
 var _Input = _interopRequireDefault(require("../../Input"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _antDesign = _interopRequireDefault(require("@iconify/json/json/ant-design.json"));
-var _ep = _interopRequireDefault(require("@iconify/json/json/ep.json"));
-var _fa = _interopRequireDefault(require("@iconify/json/json/fa.json"));
-var _faSolid = _interopRequireDefault(require("@iconify/json/json/fa-solid.json"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const icons = [{
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /**
+ * The four selectable icon sets are loaded on demand.
+ *
+ * Together these JSON files weigh about 1.9 MB, and a static import drags them into the
+ * initial bundle along with IconSelect:
+ *
+ *   FormItem → FormSelect → IconSelect → @iconify/json/json/*.json
+ *
+ * Only pages like menu management ever actually open the icon picker, so the set metadata
+ * and the icon-name list are split apart: label / name stay static (the Tabs must render
+ * immediately), and the matching set is fetched for the current tab once the popover opens.
+ */
+const ICON_SETS = [{
   label: "Ant Design",
   name: "ant-design",
-  icons: Object.keys(_antDesign.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/ant-design.json")))
 }, {
   label: "Element Plus",
   name: "ep",
-  icons: Object.keys(_ep.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/ep.json")))
 }, {
   label: "Font Awesome 4",
   name: "fa",
-  icons: Object.keys(_fa.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/fa.json")))
 }, {
   label: "Font Awesome 5 Solid",
   name: "fa-solid",
-  icons: Object.keys(_faSolid.default.icons)
+  load: () => Promise.resolve().then(() => _interopRequireWildcard(require("@iconify/json/json/fa-solid.json")))
 }];
 const IconSelect = props => {
   const {
@@ -45,18 +52,40 @@ const IconSelect = props => {
   const [search, setSearch] = (0, _react.useState)("");
   const [currentTab, setCurrentTab] = (0, _react.useState)("");
   const [activeIcon, setActiveIcon] = (0, _react.useState)("");
+  const [open, setOpen] = (0, _react.useState)(false);
+  /** Loaded icon-name lists, cached by set name */
+  const [iconNames, setIconNames] = (0, _react.useState)({});
   (0, _react.useEffect)(() => {
-    setCurrentTab(icons[0].name);
+    setCurrentTab(ICON_SETS[0].name);
   }, []);
   (0, _react.useEffect)(() => {
     if (value && value !== _value) {
       setValue(value);
-      if (icons.find(item => item.name === value.split(":")[0])) {
+      if (ICON_SETS.find(item => item.name === value.split(":")[0])) {
         setCurrentTab(value.split(":")[0]);
         setActiveIcon(value);
       }
     }
   }, [value, _value]);
+
+  // Only fetch the current tab's icon names once the popover is open, and only once per set
+  (0, _react.useEffect)(() => {
+    if (!open || !currentTab || iconNames[currentTab]) return;
+    const target = ICON_SETS.find(item => item.name === currentTab);
+    if (!target) return;
+    let alive = true;
+    target.load().then(module => {
+      if (!alive) return;
+      const json = module.default ?? module;
+      setIconNames(prev => ({
+        ...prev,
+        [currentTab]: Object.keys(json.icons ?? {})
+      }));
+    });
+    return () => {
+      alive = false;
+    };
+  }, [open, currentTab, iconNames]);
   const _onChange = value => {
     setValue(value);
     onChange?.(value);
@@ -70,6 +99,8 @@ const IconSelect = props => {
       placement: "bottom",
       trigger: "click",
       zIndex: 1000,
+      open: open,
+      onOpenChange: setOpen,
       content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _indexModule.default.popoverContent,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
@@ -85,12 +116,12 @@ const IconSelect = props => {
           onChange: key => {
             setCurrentTab(key);
           },
-          items: icons?.map(type => ({
+          items: ICON_SETS.map(type => ({
             label: type.label,
             key: type.name,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: (0, _classnames.default)(_indexModule.default.typeIcon),
-              children: type.icons?.filter(i => i.includes(search))?.map(item => {
+              children: (iconNames[type.name] ?? []).filter(i => i.includes(search)).map(item => {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
                   title: type.name + ":" + item,
                   placement: "top",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Button/index.tsx

@@ -1,13 +1,27 @@
 import { Button as AntdButton, ButtonProps as AntdButtonProps } from "antd";
 
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import ChakraButton, { ChakraButtonProps } from "./ChakraButton";
+import type { ChakraButtonProps } from "./ChakraButton";
 
 export type { ChakraButtonProps };
 
+/**
+ * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
+ * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
+ * on-demand loading: the type goes through `import type` (erased at compile time), and the
+ * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ */
+const InternalChakraButton = lazy(() => import("./ChakraButton"));
+
+const ChakraButton: React.FC<ChakraButtonProps> = (props) => (
+  <Suspense fallback={null}>
+    <InternalChakraButton {...props} />
+  </Suspense>
+);
+
 export interface ButtonProps extends AntdButtonProps {
   hasPermi?: string[];
   hidden?: boolean;

package/src/components/Select/IconSelect/index.tsx

@@ -6,35 +6,42 @@ import Input from "../../Input";
 import styles from "./index.module.scss";
 import classNames from "classnames";
 
-import antDesignIcons from "@iconify/json/json/ant-design.json";
-import elementPlusIcons from "@iconify/json/json/ep.json";
-import fontAwesome4Icons from "@iconify/json/json/fa.json";
-import fontAwesome5SolidIcons from "@iconify/json/json/fa-solid.json";
-
-const icons: Array<{
+/**
+ * The four selectable icon sets are loaded on demand.
+ *
+ * Together these JSON files weigh about 1.9 MB, and a static import drags them into the
+ * initial bundle along with IconSelect:
+ *
+ *   FormItem → FormSelect → IconSelect → @iconify/json/json/*.json
+ *
+ * Only pages like menu management ever actually open the icon picker, so the set metadata
+ * and the icon-name list are split apart: label / name stay static (the Tabs must render
+ * immediately), and the matching set is fetched for the current tab once the popover opens.
+ */
+const ICON_SETS: Array<{
   label: string;
   name: string;
-  icons: string[];
+  load: () => Promise<unknown>;
 }> = [
   {
     label: "Ant Design",
     name: "ant-design",
-    icons: Object.keys(antDesignIcons.icons),
+    load: () => import("@iconify/json/json/ant-design.json"),
   },
   {
     label: "Element Plus",
     name: "ep",
-    icons: Object.keys(elementPlusIcons.icons),
+    load: () => import("@iconify/json/json/ep.json"),
   },
   {
     label: "Font Awesome 4",
     name: "fa",
-    icons: Object.keys(fontAwesome4Icons.icons),
+    load: () => import("@iconify/json/json/fa.json"),
   },
   {
     label: "Font Awesome 5 Solid",
     name: "fa-solid",
-    icons: Object.keys(fontAwesome5SolidIcons.icons),
+    load: () => import("@iconify/json/json/fa-solid.json"),
   },
 ];
 
@@ -50,22 +57,51 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
   const [search, setSearch] = useState<string>("");
   const [currentTab, setCurrentTab] = useState<string>("");
   const [activeIcon, setActiveIcon] = useState<string>("");
+  const [open, setOpen] = useState<boolean>(false);
+  /** Loaded icon-name lists, cached by set name */
+  const [iconNames, setIconNames] = useState<Record<string, string[]>>({});
 
   useEffect(() => {
-    setCurrentTab(icons[0].name);
+    setCurrentTab(ICON_SETS[0].name);
   }, []);
 
   useEffect(() => {
     if (value && value !== _value) {
       setValue(value);
 
-      if (icons.find((item) => item.name === value.split(":")[0])) {
+      if (ICON_SETS.find((item) => item.name === value.split(":")[0])) {
         setCurrentTab(value.split(":")[0]);
         setActiveIcon(value);
       }
     }
   }, [value, _value]);
 
+  // Only fetch the current tab's icon names once the popover is open, and only once per set
+  useEffect(() => {
+    if (!open || !currentTab || iconNames[currentTab]) return;
+
+    const target = ICON_SETS.find((item) => item.name === currentTab);
+    if (!target) return;
+
+    let alive = true;
+    target.load().then((module) => {
+      if (!alive) return;
+
+      const json = ((module as { default?: unknown }).default ?? module) as {
+        icons: Record<string, unknown>;
+      };
+
+      setIconNames((prev) => ({
+        ...prev,
+        [currentTab]: Object.keys(json.icons ?? {}),
+      }));
+    });
+
+    return () => {
+      alive = false;
+    };
+  }, [open, currentTab, iconNames]);
+
   const _onChange = (value: string) => {
     setValue(value);
     onChange?.(value);
@@ -82,6 +118,8 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
           placement="bottom"
           trigger="click"
           zIndex={1000}
+          open={open}
+          onOpenChange={setOpen}
           content={
             <div className={styles.popoverContent}>
               <Input
@@ -96,14 +134,14 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
                 onChange={(key) => {
                   setCurrentTab(key);
                 }}
-                items={icons?.map((type) => ({
+                items={ICON_SETS.map((type) => ({
                   label: type.label,
                   key: type.name,
                   children: (
                     <div className={classNames(styles.typeIcon)}>
-                      {type.icons
-                        ?.filter((i) => i.includes(search))
-                        ?.map((item: string) => {
+                      {(iconNames[type.name] ?? [])
+                        .filter((i) => i.includes(search))
+                        .map((item: string) => {
                           return (
                             <Tooltip
                               key={item}