feat: add flux icon (#630)

src/components/TabList.tsx

@@ -22,6 +22,8 @@ import {
 } from 'react'
 import styled, { useTheme } from 'styled-components'
 
+import { type Nullable } from '../types'
+
 import { useItemWrappedChildren } from './ListBox'
 import ArrowScroll from './ArrowScroll'
 import WrapWithIf from './WrapWithIf'
@@ -55,7 +57,9 @@ export type TabStateRef = MutableRefObject<{
   updateTabPanel: () => any
 }>
 
-type ChildrenType = ReactElement<TabBaseProps> | ReactElement<TabBaseProps>[]
+type ChildrenType =
+  | Nullable<ReactElement<TabBaseProps>>
+  | Nullable<ReactElement<TabBaseProps>>[]
 
 type TabListProps = {
   stateRef: TabStateRef

src/components/icons/FluxIcon.tsx

@@ -0,0 +1,62 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color, secondaryColor, fullColor }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    width={size}
+    height={size}
+  >
+    <g>
+      <path
+        fill={fullColor ? '#326CE5' : color}
+        d="M2.525,4.25c-0.225-0.15-0.275-0.425-0.125-0.65c0.025-0.05,0.075-0.1,0.125-0.125L7.75,0.075c0.15-0.1,0.35-0.1,0.5,0l5.225,3.4
+		c0.225,0.15,0.275,0.425,0.125,0.65c-0.025,0.05-0.075,0.1-0.125,0.125L8.25,7.625c-0.15,0.1-0.35,0.1-0.5,0L2.525,4.25z"
+      />
+      <path
+        fill={fullColor ? '#C1D2F7' : secondaryColor}
+        d="M8.825,4.85h0.35c0.15,0,0.275-0.125,0.275-0.275c0-0.05-0.025-0.1-0.025-0.125L8.25,2.375c-0.075-0.125-0.25-0.175-0.375-0.1
+		c-0.05,0.025-0.075,0.05-0.1,0.1L6.6,4.425c-0.075,0.125-0.025,0.3,0.1,0.375C6.75,4.825,6.8,4.825,6.825,4.825h0.35
+		c0.15,0,0.275,0.125,0.275,0.275l0,0v2.35l0.25,0.15c0.175,0.125,0.425,0.125,0.6,0l0.25-0.15v-2.35C8.55,4.975,8.675,4.85,8.825,4.85
+		C8.825,4.85,8.825,4.85,8.825,4.85z"
+      />
+      <path
+        fill="none"
+        d="M7.75,15.925c0.05,0.025,0.1,0.05,0.15,0.075c-0.1-0.05-0.2-0.1-0.3-0.15L7.75,15.925z M7.45,8.55l-0.525,0.325
+		c0.175,0.1,0.35,0.2,0.525,0.3V8.55z M8.55,9.65c0.45,0.15,0.9,0.25,1.375,0.375c0.5,0.125,1,0.25,1.5,0.4l-1.625-1.05
+		c-0.425-0.125-0.85-0.25-1.25-0.425L8.55,9.65z M8.55,12.475V12.5c0,0.125-0.125,0.225-0.275,0.225h-0.55
+		c-0.15,0-0.275-0.1-0.275-0.225v-0.3c-1.15-0.3-2.275-0.65-3.25-1.55l-0.675,0.425c1.025,1,2.3,1.325,3.65,1.65
+		c1.25,0.3,2.525,0.625,3.6,1.525l0.675-0.425C10.625,13.075,9.6,12.75,8.55,12.475z M4.075,13.525l1.775,1.15
+		c0.925,0.225,1.85,0.525,2.675,1.075l0.675-0.45c-0.9-0.625-1.95-0.875-3.025-1.15C5.45,14,4.75,13.825,4.075,13.525z M7.45,9.775
+		c-0.35-0.15-0.675-0.35-0.975-0.575l-0.675,0.45c0.5,0.4,1.075,0.65,1.65,0.85L7.45,9.775z M9.8,10.525
+		c-0.425-0.1-0.825-0.2-1.25-0.325v0.625c0.15,0.05,0.3,0.075,0.475,0.125c1.375,0.325,2.775,0.675,3.925,1.825
+		c0.025,0.025,0.05,0.05,0.075,0.075l0.45-0.3c0.075-0.05,0.125-0.1,0.15-0.175c-0.05-0.05-0.1-0.1-0.15-0.15
+		C12.45,11.175,11.15,10.85,9.8,10.525L9.8,10.525z M8.9,11.425c-0.125-0.025-0.225-0.05-0.35-0.075v0.6
+		c1.175,0.3,2.375,0.675,3.35,1.6l0.675-0.425c0,0,0,0,0,0C11.525,12.075,10.25,11.775,8.9,11.425z M7.45,11.025
+		c-0.75-0.25-1.475-0.575-2.125-1.1l-0.675,0.425c0.825,0.7,1.775,1.025,2.8,1.3V11.025z"
+      />
+      <path
+        fill="none"
+        d="M3.15,11.425c-0.025-0.025-0.025-0.025-0.05-0.05L2.525,11.75c-0.025,0.025-0.05,0.05-0.075,0.075
+		c0.05,0.05,0.1,0.1,0.15,0.15c1.025,1.025,2.325,1.35,3.675,1.675c1.15,0.275,2.35,0.575,3.375,1.35l0.675-0.45
+		c-0.95-0.75-2.075-1.025-3.275-1.325C5.7,12.925,4.275,12.575,3.15,11.425L3.15,11.425z"
+      />
+      <path
+        fill={fullColor ? '#326CE5' : color}
+        d="M9.8,9.375l-1.25-0.825v0.375C9.2,9.125,9.5,9.25,9.8,9.375z M8.55,9.65v0.55c0.425,0.125,0.825,0.225,1.25,0.325
+		c1.35,0.325,2.65,0.65,3.675,1.675c0.05,0.05,0.1,0.1,0.15,0.15c0.1-0.225,0.05-0.475-0.15-0.6l-2.05-1.325
+		c-0.5-0.175-1-0.3-1.5-0.4C9.45,9.9,9,9.8,8.55,9.65L8.55,9.65z M7.45,9.2c-0.175-0.1-0.35-0.2-0.525-0.3l-0.475,0.3
+		c0.3,0.225,0.65,0.425,0.975,0.575L7.45,9.2z M9.025,10.925c-0.15-0.05-0.3-0.075-0.475-0.125v0.525c0.125,0.025,0.225,0.05,0.35,0.075
+		c1.35,0.325,2.65,0.65,3.675,1.675c0,0,0,0,0,0l0.45-0.275c-0.025-0.025-0.05-0.05-0.075-0.075C11.8,11.6,10.375,11.275,9.025,10.925z
+		 M7.45,10.5c-0.6-0.2-1.15-0.475-1.65-0.85l-0.45,0.3c0.65,0.525,1.375,0.85,2.125,1.1V10.5z M7.45,11.675
+		c-1.025-0.275-1.975-0.6-2.8-1.3l-0.45,0.3c0.95,0.875,2.1,1.25,3.25,1.55V11.675z M8.55,12.475c1.075,0.275,2.075,0.6,2.9,1.35
+		l0.45-0.3c-1-0.925-2.175-1.3-3.35-1.6L8.55,12.475z M3.55,11.1l-0.45,0.3c0.025,0.025,0.025,0.025,0.05,0.05
+		c1.125,1.125,2.55,1.475,3.925,1.825c1.175,0.3,2.325,0.575,3.275,1.325l0.45-0.3c-1.075-0.9-2.35-1.225-3.6-1.525
+		C5.85,12.425,4.575,12.1,3.55,11.1z M2.6,11.975c-0.05-0.05-0.1-0.1-0.15-0.15c-0.175,0.175-0.175,0.475,0,0.65
+		c0.025,0.025,0.05,0.05,0.075,0.05l1.525,1c0.675,0.275,1.4,0.45,2.1,0.625c1.1,0.275,2.125,0.525,3.025,1.15l0.475-0.3
+		c-1.025-0.775-2.225-1.075-3.375-1.35C4.925,13.325,3.625,13,2.6,11.975L2.6,11.975z M7.6,15.825c0.1,0.05,0.2,0.1,0.3,0.15
+		c0.125,0.025,0.25,0,0.35-0.075l0.25-0.175c-0.825-0.55-1.75-0.825-2.675-1.075L7.6,15.825z"
+      />
+    </g>
+  </svg>
+))

src/icons.ts

@@ -80,6 +80,7 @@ export { default as FastReverseIcon } from './components/icons/FastReverseIcon'
 export { default as FileIcon } from './components/icons/FileIcon'
 export { default as FiltersIcon } from './components/icons/FiltersIcon'
 export { default as FingerPrintIcon } from './components/icons/FingerPrintIcon'
+export { default as FluxIcon } from './components/icons/FluxIcon'
 export { default as FolderIcon } from './components/icons/FolderIcon'
 export { default as GearTrainIcon } from './components/icons/GearTrainIcon'
 export { default as GitCommitIcon } from './components/icons/GitCommitIcon'

src/types.ts

@@ -57,3 +57,5 @@ export type SeverityExt = (typeof SEVERITIES)[number]
 export type ColorKey = keyof DefaultTheme['colors']
 
 export { type CSSObject } from 'styled-components'
+
+export type Nullable<T> = T | null | undefined