diff --git a/.gitignore b/.gitignore index fd4f2b0..328e234 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -.DS_Store +lib +yarn-error.log diff --git a/src/ArrowBox.tsx b/src/ArrowBox.tsx new file mode 100644 index 0000000..3636356 --- /dev/null +++ b/src/ArrowBox.tsx @@ -0,0 +1,14 @@ +import React, { forwardRef } from "react" + +import Icon from "./Icon" +import { ReactComponent as ArrowBoxSvg } from "./images/data-box.svg" + +export const ArrowBoxIcon = forwardRef< + SVGSVGElement, + { + className?: string + style?: React.CSSProperties + } +>(function InnerArrowBoxIcon(props, ref) { + return +}) diff --git a/src/CollapseIcon.tsx b/src/CollapseIcon.tsx new file mode 100644 index 0000000..aecd81b --- /dev/null +++ b/src/CollapseIcon.tsx @@ -0,0 +1,8 @@ +import React, { forwardRef } from "react" + +import Icon from "./Icon" +import { ReactComponent as Backup } from "./images/collapse-custom.svg" + +export const CollapseIcon = forwardRef(function InnerArgoCDIcon(props, ref) { + return +}) diff --git a/src/DragAreaIcon.tsx b/src/DragAreaIcon.tsx new file mode 100644 index 0000000..f8ff0d6 --- /dev/null +++ b/src/DragAreaIcon.tsx @@ -0,0 +1,14 @@ +import React, { forwardRef } from "react" + +import Icon from "./Icon" +import { ReactComponent as DragArea } from "./images/drag-area.svg" + +export const DragAreaIcon = forwardRef< + SVGSVGElement, + { + className?: string + style?: React.CSSProperties + } +>(function InnerDragAreaIcon(props, ref) { + return +}) diff --git a/src/KubernetesOutlined.tsx b/src/KubernetesOutlined.tsx new file mode 100644 index 0000000..9a82983 --- /dev/null +++ b/src/KubernetesOutlined.tsx @@ -0,0 +1,11 @@ +import React, { forwardRef } from "react" + +import Icon, { IconProps } from "./Icon" +import { ReactComponent as KubernetesSvg } from "./images/Kubernetes.svg" + +export const KubernetesOutlinedIcon = forwardRef< + SVGSVGElement, + Omit +>(function InnerKubernetesIcon(props, ref) { + return +}) diff --git a/src/RegexIcon.tsx b/src/RegexIcon.tsx new file mode 100644 index 0000000..064582e --- /dev/null +++ b/src/RegexIcon.tsx @@ -0,0 +1,14 @@ +import React, { forwardRef } from "react" + +import Icon from "./Icon" +import { ReactComponent as Expand } from "./images/regex.svg" + +export const RegexIcon = forwardRef< + SVGSVGElement, + { + className?: string + style?: React.CSSProperties + } +>(function InnerRegexIcon(props, ref) { + return +}) diff --git a/src/SleepIcon.tsx b/src/SleepIcon.tsx index 5950615..874b188 100644 --- a/src/SleepIcon.tsx +++ b/src/SleepIcon.tsx @@ -3,6 +3,12 @@ import React, { forwardRef } from "react" import Icon from "./Icon" import { ReactComponent as SleepSvg } from "./images/sleep.svg" -export const SleepIcon = forwardRef(function InnerSleepIcon(props, ref) { +export const SleepIcon = forwardRef< + SVGSVGElement, + { + className?: string + style?: React.CSSProperties + } +>(function InnerSleepIcon(props, ref) { return }) diff --git a/src/images/Kubernetes.svg b/src/images/Kubernetes.svg new file mode 100644 index 0000000..c56b37f --- /dev/null +++ b/src/images/Kubernetes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/collapse-custom.svg b/src/images/collapse-custom.svg new file mode 100644 index 0000000..acec9d8 --- /dev/null +++ b/src/images/collapse-custom.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/data-box.svg b/src/images/data-box.svg new file mode 100644 index 0000000..5385382 --- /dev/null +++ b/src/images/data-box.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/images/drag-area.svg b/src/images/drag-area.svg new file mode 100644 index 0000000..79b02de --- /dev/null +++ b/src/images/drag-area.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/regex.svg b/src/images/regex.svg new file mode 100644 index 0000000..1e7490d --- /dev/null +++ b/src/images/regex.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/vcluster-platform-logo.svg b/src/images/vcluster-platform-logo.svg new file mode 100644 index 0000000..af4dc48 --- /dev/null +++ b/src/images/vcluster-platform-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.tsx b/src/index.tsx index 8642dcc..16fd6ac 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -import { lazy } from "react" +import React, { forwardRef } from "react" import { createLazyIconComponent } from "./utils" @@ -32,410 +32,396 @@ export { EditPencilIcon } from "./EditPencil" export { VClusterRocketIcon } from "./VClusterRocket" export * from "./ExternallyDeployedIcons" export { ExpandIcon } from "./ExpandIcon" +export { RegexIcon } from "./RegexIcon" +export { DragAreaIcon } from "./DragAreaIcon" +export { CollapseIcon } from "./CollapseIcon" +export { KubernetesOutlinedIcon } from "./KubernetesOutlined" +export { ArrowBoxIcon } from "./ArrowBox" -export const LeftOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/LeftOutlined")) +const FallbackIcon = forwardRef(() => ) +FallbackIcon.displayName = "FallbackIcon" + +export const AlignLeftOutlined = createLazyIconComponent( + () => import("@ant-design/icons/AlignLeftOutlined") +) +export const CheckSquareOutlined = createLazyIconComponent( + () => import("@ant-design/icons/CheckSquareOutlined") +) + +export const FontSizeOutlined = createLazyIconComponent( + () => import("@ant-design/icons/FontSizeOutlined") +) + +export const FieldBinaryOutlined = createLazyIconComponent( + () => import("@ant-design/icons/FieldBinaryOutlined") ) + +export const LeftOutlined = createLazyIconComponent(() => import("@ant-design/icons/LeftOutlined")) + +export const BarsOutlined = createLazyIconComponent(() => import("@ant-design/icons/BarsOutlined")) + +export const ColumnWidthOutlined = createLazyIconComponent( + () => import("@ant-design/icons/ColumnWidthOutlined") +) + export const RightOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/RightOutlined")) + () => import("@ant-design/icons/RightOutlined") ) export const DisconnectOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DisconnectOutlined")) + () => import("@ant-design/icons/DisconnectOutlined") ) export const DownloadOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DownloadOutlined")) + () => import("@ant-design/icons/DownloadOutlined") ) export const DeleteOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DeleteOutlined")) + () => import("@ant-design/icons/DeleteOutlined") ) -export const HddTwoTone = createLazyIconComponent( - lazy(() => import("@ant-design/icons/HddTwoTone")) -) +export const HddTwoTone = createLazyIconComponent(() => import("@ant-design/icons/HddTwoTone")) export const CloseOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CloseOutlined")) + () => import("@ant-design/icons/CloseOutlined") ) export const PlusCircleTwoTone = createLazyIconComponent( - lazy(() => import("@ant-design/icons/PlusCircleTwoTone")) + () => import("@ant-design/icons/PlusCircleTwoTone") ) -export const CopyOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CopyOutlined")) -) +export const CopyOutlined = createLazyIconComponent(() => import("@ant-design/icons/CopyOutlined")) export const MinusCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/MinusCircleOutlined")) + () => import("@ant-design/icons/MinusCircleOutlined") ) export const PlusCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/PlusCircleOutlined")) + () => import("@ant-design/icons/PlusCircleOutlined") ) export const CaretDownOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CaretDownOutlined")) + () => import("@ant-design/icons/CaretDownOutlined") ) export const CloseCircleFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CloseCircleFilled")) + () => import("@ant-design/icons/CloseCircleFilled") ) export const GithubOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/GithubOutlined")) + () => import("@ant-design/icons/GithubOutlined") ) -export const LinkOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/LinkOutlined")) -) +export const LinkOutlined = createLazyIconComponent(() => import("@ant-design/icons/LinkOutlined")) export const PlusCircleFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/PlusCircleFilled")) + () => import("@ant-design/icons/PlusCircleFilled") ) export const UserSwitchOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UserSwitchOutlined")) + () => import("@ant-design/icons/UserSwitchOutlined") ) -export const DownOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DownOutlined")) -) +export const DownOutlined = createLazyIconComponent(() => import("@ant-design/icons/DownOutlined")) export const FolderOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/FolderOutlined")) + () => import("@ant-design/icons/FolderOutlined") ) -export const PlusOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/PlusOutlined")) -) +export const PlusOutlined = createLazyIconComponent(() => import("@ant-design/icons/PlusOutlined")) -export const TagsOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/TagsOutlined")) -) +export const TagsOutlined = createLazyIconComponent(() => import("@ant-design/icons/TagsOutlined")) -export const ToolOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ToolOutlined")) -) +export const ToolOutlined = createLazyIconComponent(() => import("@ant-design/icons/ToolOutlined")) export const ArrowRightOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ArrowRightOutlined")) + () => import("@ant-design/icons/ArrowRightOutlined") ) export const CaretUpOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CaretUpOutlined")) + () => import("@ant-design/icons/CaretUpOutlined") ) -export const GoldOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/GoldOutlined")) -) +export const GoldOutlined = createLazyIconComponent(() => import("@ant-design/icons/GoldOutlined")) export const AuditOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/AuditOutlined")) + () => import("@ant-design/icons/AuditOutlined") ) export const CloudOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CloudOutlined")) + () => import("@ant-design/icons/CloudOutlined") ) export const ExpandOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ExpandOutlined")) + () => import("@ant-design/icons/ExpandOutlined") ) export const LoginOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/LoginOutlined")) + () => import("@ant-design/icons/LoginOutlined") ) export const ControlOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ControlOutlined")) + () => import("@ant-design/icons/ControlOutlined") ) -export const HddOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/HddOutlined")) -) +export const HddOutlined = createLazyIconComponent(() => import("@ant-design/icons/HddOutlined")) export const NotificationOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/NotificationOutlined")) + () => import("@ant-design/icons/NotificationOutlined") ) export const SolutionOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SolutionOutlined")) + () => import("@ant-design/icons/SolutionOutlined") ) -export const UserOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UserOutlined")) +export const UserOutlined = createLazyIconComponent(() => import("@ant-design/icons/UserOutlined")) + +export const CalendarOutlined = createLazyIconComponent( + () => import("@ant-design/icons/CalendarOutlined") ) export const AppstoreAddOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/AppstoreAddOutlined")) + () => import("@ant-design/icons/AppstoreAddOutlined") ) -export const CodeOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CodeOutlined")) -) +export const CodeOutlined = createLazyIconComponent(() => import("@ant-design/icons/CodeOutlined")) export const FileTextOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/FileTextOutlined")) + () => import("@ant-design/icons/FileTextOutlined") ) -export const FileOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/FileOutlined")) -) +export const FileOutlined = createLazyIconComponent(() => import("@ant-design/icons/FileOutlined")) export const ReloadOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ReloadOutlined")) + () => import("@ant-design/icons/ReloadOutlined") ) -export const UpOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UpOutlined")) -) +export const UpOutlined = createLazyIconComponent(() => import("@ant-design/icons/UpOutlined")) export const PauseOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/PauseOutlined")) + () => import("@ant-design/icons/PauseOutlined") ) export const UpCircleFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UpCircleFilled")) + () => import("@ant-design/icons/UpCircleFilled") ) export const MinusSquareOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/MinusSquareOutlined")) + () => import("@ant-design/icons/MinusSquareOutlined") ) export const PlusSquareOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/PlusSquareOutlined")) + () => import("@ant-design/icons/PlusSquareOutlined") ) export const QuestionCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/QuestionCircleOutlined")) + () => import("@ant-design/icons/QuestionCircleOutlined") ) export const LoadingOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/LoadingOutlined")) + () => import("@ant-design/icons/LoadingOutlined") ) -export const EditFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/EditFilled")) -) +export const EditFilled = createLazyIconComponent(() => import("@ant-design/icons/EditFilled")) export const ClockCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ClockCircleOutlined")) + () => import("@ant-design/icons/ClockCircleOutlined") ) -export const TeamOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/TeamOutlined")) -) +export const TeamOutlined = createLazyIconComponent(() => import("@ant-design/icons/TeamOutlined")) export const ContainerOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ContainerOutlined")) + () => import("@ant-design/icons/ContainerOutlined") ) export const SearchOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SearchOutlined")) + () => import("@ant-design/icons/SearchOutlined") ) export const CheckOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CheckOutlined")) + () => import("@ant-design/icons/CheckOutlined") ) export const EllipsisOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/EllipsisOutlined")) + () => import("@ant-design/icons/EllipsisOutlined") ) export const WarningOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/WarningOutlined")) + () => import("@ant-design/icons/WarningOutlined") ) -export const MoreOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/MoreOutlined")) -) +export const MoreOutlined = createLazyIconComponent(() => import("@ant-design/icons/MoreOutlined")) export const CheckCircleTwoTone = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CheckCircleTwoTone")) + () => import("@ant-design/icons/CheckCircleTwoTone") ) export const ExclamationCircleFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ExclamationCircleFilled")) + () => import("@ant-design/icons/ExclamationCircleFilled") ) export const CloseCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CloseCircleOutlined")) + () => import("@ant-design/icons/CloseCircleOutlined") ) export const InfoCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/InfoCircleOutlined")) + () => import("@ant-design/icons/InfoCircleOutlined") +) + +export const FileSyncOutlined = createLazyIconComponent( + () => import("@ant-design/icons/FileSyncOutlined") ) export const FileProtectOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/FileProtectOutlined")) + () => import("@ant-design/icons/FileProtectOutlined") ) export const ToTopOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ToTopOutlined")) + () => import("@ant-design/icons/ToTopOutlined") ) export const CheckCircleFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CheckCircleFilled")) + () => import("@ant-design/icons/CheckCircleFilled") ) export const CheckCircleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CheckCircleOutlined")) + () => import("@ant-design/icons/CheckCircleOutlined") ) export const GitlabOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/GitlabOutlined")) + () => import("@ant-design/icons/GitlabOutlined") ) export const GoogleOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/GoogleOutlined")) + () => import("@ant-design/icons/GoogleOutlined") ) export const SettingOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SettingOutlined")) + () => import("@ant-design/icons/SettingOutlined") ) -export const ApiOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ApiOutlined")) -) +export const ApiOutlined = createLazyIconComponent(() => import("@ant-design/icons/ApiOutlined")) export const AppstoreOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/AppstoreOutlined")) + () => import("@ant-design/icons/AppstoreOutlined") ) export const UploadOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UploadOutlined")) + () => import("@ant-design/icons/UploadOutlined") ) export const BlockOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/BlockOutlined")) + () => import("@ant-design/icons/BlockOutlined") ) export const DatabaseOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DatabaseOutlined")) + () => import("@ant-design/icons/DatabaseOutlined") ) export const CoffeeOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CoffeeOutlined")) + () => import("@ant-design/icons/CoffeeOutlined") ) -export const LockOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/LockOutlined")) -) +export const LockOutlined = createLazyIconComponent(() => import("@ant-design/icons/LockOutlined")) export const ShareAltOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ShareAltOutlined")) + () => import("@ant-design/icons/ShareAltOutlined") ) export const DoubleRightOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DoubleRightOutlined")) + () => import("@ant-design/icons/DoubleRightOutlined") ) -export const SyncOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SyncOutlined")) -) +export const SyncOutlined = createLazyIconComponent(() => import("@ant-design/icons/SyncOutlined")) -export const BookOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/BookOutlined")) -) +export const BookOutlined = createLazyIconComponent(() => import("@ant-design/icons/BookOutlined")) export const HourglassOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/HourglassOutlined")) + () => import("@ant-design/icons/HourglassOutlined") ) export const RetweetOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/RetweetOutlined")) + () => import("@ant-design/icons/RetweetOutlined") ) export const ApartmentOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ApartmentOutlined")) + () => import("@ant-design/icons/ApartmentOutlined") ) export const CloudServerOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CloudServerOutlined")) + () => import("@ant-design/icons/CloudServerOutlined") ) export const ClusterOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ClusterOutlined")) + () => import("@ant-design/icons/ClusterOutlined") ) -export const FireOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/FireOutlined")) -) +export const FireOutlined = createLazyIconComponent(() => import("@ant-design/icons/FireOutlined")) -export const SaveOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SaveOutlined")) -) +export const SaveOutlined = createLazyIconComponent(() => import("@ant-design/icons/SaveOutlined")) -export const SwapOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SwapOutlined")) -) +export const SwapOutlined = createLazyIconComponent(() => import("@ant-design/icons/SwapOutlined")) export const DashboardOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/DashboardOutlined")) + () => import("@ant-design/icons/DashboardOutlined") ) export const ImportOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ImportOutlined")) + () => import("@ant-design/icons/ImportOutlined") ) export const UnlockOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UnlockOutlined")) + () => import("@ant-design/icons/UnlockOutlined") ) export const UpdateOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ArrowUpOutlined")) + () => import("@ant-design/icons/ArrowUpOutlined") ) export const ArrowDownOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ArrowDownOutlined")) + () => import("@ant-design/icons/ArrowDownOutlined") ) -export const FlagOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/FlagOutlined")) -) +export const FlagOutlined = createLazyIconComponent(() => import("@ant-design/icons/FlagOutlined")) export const ExperimentOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ExperimentOutlined")) + () => import("@ant-design/icons/ExperimentOutlined") ) -export const BulbOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/BulbOutlined")) -) +export const BulbOutlined = createLazyIconComponent(() => import("@ant-design/icons/BulbOutlined")) export const KubernetesOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/KubernetesOutlined")) + () => import("@ant-design/icons/KubernetesOutlined") ) export const InfoCircleFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/InfoCircleFilled")) + () => import("@ant-design/icons/InfoCircleFilled") ) export const UserAddOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/UserAddOutlined")) + () => import("@ant-design/icons/UserAddOutlined") ) -export const KeyOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/KeyOutlined")) -) +export const KeyOutlined = createLazyIconComponent(() => import("@ant-design/icons/KeyOutlined")) export const WarningFilled = createLazyIconComponent( - lazy(() => import("@ant-design/icons/WarningFilled")) + () => import("@ant-design/icons/WarningFilled") ) export const SlackOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/SlackOutlined")) + () => import("@ant-design/icons/SlackOutlined") ) -export const ReadOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/ReadOutlined")) -) +export const ReadOutlined = createLazyIconComponent(() => import("@ant-design/icons/ReadOutlined")) export const CloudUploadOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/CloudUploadOutlined")) + () => import("@ant-design/icons/CloudUploadOutlined") ) export const Loading3QuartersOutlined = createLazyIconComponent( - lazy(() => import("@ant-design/icons/Loading3QuartersOutlined")) + () => import("@ant-design/icons/Loading3QuartersOutlined") +) + +export const PieChartOutlined = createLazyIconComponent( + () => import("@ant-design/icons/PieChartOutlined") ) diff --git a/src/utils.tsx b/src/utils.tsx index 289a2b5..464a0c2 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -1,14 +1,27 @@ -/* eslint-disable react/display-name */ -import React, { forwardRef, Suspense } from "react" +import React, { forwardRef, lazy, Suspense } from "react" import Icon from "./Icon" -const RandomIcon = React.lazy(() => import("@ant-design/icons/DeleteOutlined")) -export type TLazyIcon = typeof RandomIcon +const FallbackIcon = forwardRef((_, ref) => ) +FallbackIcon.displayName = "FallbackIcon" type IconComponentProps = Omit, "component"> -export function createLazyIconComponent(lazyIcon: TLazyIcon) { +// First, define a type for the import function +type ImportFn = () => Promise + +export function createLazyIconComponent(importFn: ImportFn) { + const lazyIcon = lazy(() => + importFn().catch((e) => { + console.error(e) + + return { + default: + FallbackIcon as unknown as typeof import("@ant-design/icons/DeleteOutlined").default, + } + }) + ) + const LazyIcon = forwardRef((props, ref) => { return ( @@ -17,5 +30,8 @@ export function createLazyIconComponent(lazyIcon: TLazyIcon) { ) }) + // Get the icon name from the last part of the import path for display name + LazyIcon.displayName = `LazyIcon` + return LazyIcon }