refactor CustomIcon component (#2026)

src/components/CustomIcon.tsx

@@ -1,54 +1,8 @@
-export type CustomIconName =
+import { cloneElement } from 'react'
-  | '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'
 
-export const CustomIcon = ({
+const CustomIconMap = {
-  name,
+  arc: (
-  ...props
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-}: {
-  name: CustomIconName
-} & React.SVGProps<SVGSVGElement>) => {
-  switch (name) {
-    case 'arc':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -56,15 +10,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'arrowDown':
+  arrowDown: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -72,15 +20,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'arrowLeft':
+  arrowLeft: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -88,15 +30,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'arrowRight':
+  arrowRight: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -104,15 +40,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'arrowUp':
+  arrowUp: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -120,15 +50,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'checkmark':
+  checkmark: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -136,15 +60,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'clipboardCheckmark':
+  clipboardCheckmark: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -152,15 +70,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'clipboardPlus':
+  clipboardPlus: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -168,15 +80,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'close':
+  close: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -184,29 +90,17 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'equal':
+  equal: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         d="M5 8.78V7H14.52V8.78H5ZM5 13.02V11.24H14.52V13.02H5Z"
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'exportFile':
+  exportFile: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -214,15 +108,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'extrude':
+  extrude: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -230,15 +118,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'file':
+  file: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -246,15 +128,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'filePlus':
+  filePlus: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -262,15 +138,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'folder':
+  folder: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -278,15 +148,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'folderPlus':
+  folderPlus: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -294,15 +158,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'gear':
+  gear: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -310,15 +168,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'horizontal':
+  horizontal: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -326,15 +178,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'horizontalDash':
+  horizontalDash: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -342,15 +188,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'kcl':
+  kcl: (
-      return (
+    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 40 40"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -358,15 +198,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'line':
+  line: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -374,15 +208,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'make-variable':
+  'make-variable': (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -390,15 +218,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'move':
+  move: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -406,15 +228,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'network':
+  network: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -422,15 +238,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'networkCrossedOut':
+  networkCrossedOut: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -438,15 +248,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'parallel':
+  parallel: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -454,15 +258,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'person':
+  person: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -470,15 +268,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'plus':
+  plus: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -486,15 +278,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'refresh':
+  refresh: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -502,15 +288,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'search':
+  search: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -518,15 +298,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'settings':
+  settings: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -534,15 +308,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'sketch':
+  sketch: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -550,15 +318,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'three-dots':
+  'three-dots': (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -566,15 +328,9 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-    case 'vertical':
+  vertical: (
-      return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -582,6 +338,13 @@ export const CustomIcon = ({
         fill="currentColor"
       />
     </svg>
-      )
+  ),
-  }
+} as const
-}
+
+export type CustomIconName = keyof typeof CustomIconMap
+
+export const CustomIcon = ({
+  name,
+  ...props
+}: { name: CustomIconName } & React.SVGProps<SVGSVGElement>) =>
+  cloneElement(CustomIconMap[name], props)