diff --git a/src/components/CustomIcon.tsx b/src/components/CustomIcon.tsx
index b7f74ab50..ccf47fcb5 100644
--- a/src/components/CustomIcon.tsx
+++ b/src/components/CustomIcon.tsx
@@ -1,587 +1,350 @@
-export type CustomIconName =
- | 'arc'
- | 'arrowDown'
- | 'arrowLeft'
- | 'arrowRight'
- | 'arrowUp'
- | 'checkmark'
- | 'clipboardPlus'
- | 'clipboardCheckmark'
- | 'close'
- | 'equal'
- | 'exportFile'
- | 'extrude'
- | 'file'
- | 'filePlus'
- | 'folder'
- | 'folderPlus'
- | 'gear'
- | 'horizontal'
- | 'horizontalDash'
- | 'kcl'
- | 'line'
- | 'make-variable'
- | 'move'
- | 'network'
- | 'networkCrossedOut'
- | 'parallel'
- | 'person'
- | 'plus'
- | 'refresh'
- | 'search'
- | 'settings'
- | 'sketch'
- | 'three-dots'
- | 'vertical'
+import { cloneElement } from 'react'
+
+const CustomIconMap = {
+ arc: (
+
+ ),
+ arrowDown: (
+
+ ),
+ arrowLeft: (
+
+ ),
+ arrowRight: (
+
+ ),
+ arrowUp: (
+
+ ),
+ checkmark: (
+
+ ),
+ clipboardCheckmark: (
+
+ ),
+ clipboardPlus: (
+
+ ),
+ close: (
+
+ ),
+ equal: (
+
+ ),
+ exportFile: (
+
+ ),
+ extrude: (
+
+ ),
+ file: (
+
+ ),
+ filePlus: (
+
+ ),
+ folder: (
+
+ ),
+ folderPlus: (
+
+ ),
+ gear: (
+
+ ),
+ horizontal: (
+
+ ),
+ horizontalDash: (
+
+ ),
+ kcl: (
+
+ ),
+ line: (
+
+ ),
+ 'make-variable': (
+
+ ),
+ move: (
+
+ ),
+ network: (
+
+ ),
+ networkCrossedOut: (
+
+ ),
+ parallel: (
+
+ ),
+ person: (
+
+ ),
+ plus: (
+
+ ),
+ refresh: (
+
+ ),
+ search: (
+
+ ),
+ settings: (
+
+ ),
+ sketch: (
+
+ ),
+ 'three-dots': (
+
+ ),
+ vertical: (
+
+ ),
+} as const
+
+export type CustomIconName = keyof typeof CustomIconMap
export const CustomIcon = ({
name,
...props
-}: {
- name: CustomIconName
-} & React.SVGProps) => {
- switch (name) {
- case 'arc':
- return (
-
- )
- case 'arrowDown':
- return (
-
- )
- case 'arrowLeft':
- return (
-
- )
- case 'arrowRight':
- return (
-
- )
- case 'arrowUp':
- return (
-
- )
- case 'checkmark':
- return (
-
- )
- case 'clipboardCheckmark':
- return (
-
- )
- case 'clipboardPlus':
- return (
-
- )
- case 'close':
- return (
-
- )
- case 'equal':
- return (
-
- )
- case 'exportFile':
- return (
-
- )
- case 'extrude':
- return (
-
- )
- case 'file':
- return (
-
- )
- case 'filePlus':
- return (
-
- )
- case 'folder':
- return (
-
- )
- case 'folderPlus':
- return (
-
- )
- case 'gear':
- return (
-
- )
- case 'horizontal':
- return (
-
- )
- case 'horizontalDash':
- return (
-
- )
- case 'kcl':
- return (
-
- )
- case 'line':
- return (
-
- )
- case 'make-variable':
- return (
-
- )
- case 'move':
- return (
-
- )
- case 'network':
- return (
-
- )
- case 'networkCrossedOut':
- return (
-
- )
- case 'parallel':
- return (
-
- )
- case 'person':
- return (
-
- )
- case 'plus':
- return (
-
- )
- case 'refresh':
- return (
-
- )
- case 'search':
- return (
-
- )
- case 'settings':
- return (
-
- )
- case 'sketch':
- return (
-
- )
- case 'three-dots':
- return (
-
- )
- case 'vertical':
- return (
-
- )
- }
-}
+}: { name: CustomIconName } & React.SVGProps) =>
+ cloneElement(CustomIconMap[name], props)