diff --git a/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx b/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx
index 9a3ba16830..10ce453162 100644
--- a/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx
+++ b/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx
@@ -1,9 +1,15 @@
-import { type FC, useRef } from 'react';
+import { type ComponentType, useRef } from 'react';
 import * as uiIcons from '@toeverything/components/icons';
 import { message, styled } from '@toeverything/components/ui';
 import { copy } from './copy';
 
-const IconBooth = ({ name, Icon }: { name: string; Icon: FC<any> }) => {
+const IconBooth = ({
+    name,
+    Icon,
+}: {
+    name: string;
+    Icon: ComponentType<any>;
+}) => {
     const on_click = () => {
         copy(`<${name} />`);
         message.success('Copied ~');
@@ -36,7 +42,13 @@ export const Icons = () => {
             <hr />
             <IconsContainer>
                 {_icons.map(([key, icon]) => {
-                    return <IconBooth key={key} name={key} Icon={icon as FC} />;
+                    return (
+                        <IconBooth
+                            key={key}
+                            name={key}
+                            Icon={icon as ComponentType<any>}
+                        />
+                    );
                 })}
             </IconsContainer>
         </Container>
diff --git a/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx
index 8b13982b83..b5e9f2f073 100644
--- a/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx
+++ b/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { Popover, Tooltip, IconButton } from '@toeverything/components/ui';
diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
index bc22965a71..b8dece4cc1 100644
--- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
+++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Fragment } from 'react';
 import { Vec } from '@tldraw/vec';
 import { TldrawApp, TLDR } from '@toeverything/components/board-state';
diff --git a/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx b/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx
index 050c1e23d7..474fee5dc0 100644
--- a/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx
+++ b/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { IconButton, Tooltip } from '@toeverything/components/ui';
diff --git a/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx
index 57c6a68d13..70f4738390 100644
--- a/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx
+++ b/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import {
diff --git a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
index dfb6252290..21d5cef043 100644
--- a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
+++ b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { FontSizeStyle } from '@toeverything/components/board-types';
diff --git a/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx
index 7e325a06f3..1b107a962b 100644
--- a/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx
+++ b/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import {
diff --git a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
index 6e6a0fcc93..954e2c3eb4 100644
--- a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
+++ b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { IconButton, Tooltip } from '@toeverything/components/ui';
diff --git a/libs/components/board-draw/src/components/command-panel/LockOperation.tsx b/libs/components/board-draw/src/components/command-panel/LockOperation.tsx
index c03ec01e1b..b16d8f26f1 100644
--- a/libs/components/board-draw/src/components/command-panel/LockOperation.tsx
+++ b/libs/components/board-draw/src/components/command-panel/LockOperation.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { IconButton, Tooltip } from '@toeverything/components/ui';
diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx
index e68df6c280..06e6bfb1de 100644
--- a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx
+++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { DashStyle, StrokeWidth } from '@toeverything/components/board-types';
 import {
     LineNoneIcon,
diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx
index fb9bea617c..3698d2dd86 100644
--- a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx
+++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import { DashStyle, StrokeWidth } from '@toeverything/components/board-types';
 import type { TDShape } from '@toeverything/components/board-types';
diff --git a/libs/components/board-draw/src/components/context-menu/context-menu.tsx b/libs/components/board-draw/src/components/context-menu/context-menu.tsx
index 6d8bb5c007..a303f45df1 100644
--- a/libs/components/board-draw/src/components/context-menu/context-menu.tsx
+++ b/libs/components/board-draw/src/components/context-menu/context-menu.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export const ContextMenu = ({ children }: { children: ReactNode }) => {
     return <div>{children}</div>;
diff --git a/libs/components/board-draw/src/components/palette/Palette.tsx b/libs/components/board-draw/src/components/palette/Palette.tsx
index f89decdd2b..ac2492d271 100644
--- a/libs/components/board-draw/src/components/palette/Palette.tsx
+++ b/libs/components/board-draw/src/components/palette/Palette.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { useMemo } from 'react';
 import { styled, Tooltip } from '@toeverything/components/ui';
 import { ShapeColorNoneIcon } from '@toeverything/components/icons';
diff --git a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
index ea54a20145..4a1ed06ada 100644
--- a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
     ConnectorIcon,
     ConectorLineIcon,
diff --git a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
index 32f8a5ba9a..83b890fc09 100644
--- a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
     ShapeIcon,
     RectangleIcon,
diff --git a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
index f650f8dd8c..f518f7bc0f 100644
--- a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import style9 from 'style9';
 import {
     // MuiIconButton as IconButton,
@@ -14,6 +13,10 @@ import {
     SelectIcon,
     TextIcon,
     EraserIcon,
+    SelectIconProps,
+    EraserIconProps,
+    HandToolIconProps,
+    TextIconProps,
 } from '@toeverything/components/icons';
 
 import {
@@ -26,6 +29,7 @@ import { TldrawApp } from '@toeverything/components/board-state';
 import { ShapeTools } from './ShapeTools';
 import { PenTools } from './pen-tools';
 import { LineTools } from './LineTools';
+import { ComponentType, Component } from 'react';
 
 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
 const toolLockedSelector = (s: TDSnapshot) => s.appState.isToolLocked;
@@ -34,8 +38,10 @@ const tools: Array<{
     type: string;
     label?: string;
     tooltip?: string;
-    icon?: FC;
-    component?: FC<{ app: TldrawApp }>;
+    icon?: ComponentType<
+        SelectIconProps | EraserIconProps | HandToolIconProps | TextIconProps
+    >;
+    component?: ComponentType<{ app: TldrawApp }>;
 }> = [
     {
         type: 'select',
diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx b/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx
index bcfc0b3bdf..119e464e0f 100644
--- a/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Tooltip, styled, IconButton } from '@toeverything/components/ui';
 
 interface PenProps {
diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx b/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
index e634ddfef3..5da177f152 100644
--- a/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactElement, type CSSProperties } from 'react';
+import { ReactElement, type CSSProperties } from 'react';
 import style9 from 'style9';
 import {
     MuiDivider as Divider,
diff --git a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
index ba05686c80..66b11ab1c6 100644
--- a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
+++ b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import {
     MuiIconButton as IconButton,
     MuiButton as Button,
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx
index 0b950fe026..40ffbd9d34 100644
--- a/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Utils } from '@tldraw/core';
 import Vec from '@tldraw/vec';
 import { TLDR } from '@toeverything/components/board-state';
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx
index 9edb3eda65..ac8101956a 100644
--- a/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx
@@ -1,4 +1,4 @@
-import type { FC, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import type { TLBounds } from '@tldraw/core';
 import { styled } from '@toeverything/components/ui';
 
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx
index 7cd830f16d..2db0588ba5 100644
--- a/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx
@@ -1,4 +1,4 @@
-import type { FC, CSSProperties, PointerEventHandler } from 'react';
+import type { CSSProperties, PointerEventHandler } from 'react';
 import { useState, useRef } from 'react';
 import type { TLBounds } from '@tldraw/core';
 import Vec from '@tldraw/vec';
diff --git a/libs/components/common/src/lib/list/index.tsx b/libs/components/common/src/lib/list/index.tsx
index 74e09ad523..8f57a1d871 100644
--- a/libs/components/common/src/lib/list/index.tsx
+++ b/libs/components/common/src/lib/list/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import clsx from 'clsx';
 import style9 from 'style9';
@@ -21,7 +21,7 @@ export const commonListContainer = 'commonListContainer';
 type Content = {
     id: string;
     content: string;
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
 };
 
 export type CommonListItem = {
diff --git a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
index 2835a284cf..5a15a78554 100644
--- a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
+++ b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
@@ -5,7 +5,7 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { type CreateView } from '@toeverything/framework/virgo';
-import { useEffect, useRef, useState, type FC } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import {
     TextManage,
diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
index 680bbea84d..2739c8a70c 100644
--- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
+++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { StyleWithAtRules } from 'style9';
 
 import { CreateView } from '@toeverything/framework/virgo';
diff --git a/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx b/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx
index 293fd2c4cc..4dfed61d79 100644
--- a/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx
+++ b/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { styled } from '@toeverything/components/ui';
 import { useOnSelect } from '@toeverything/components/editor-core';
diff --git a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
index e939f3951b..86881478ff 100644
--- a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
+++ b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     BlockPendantProvider,
diff --git a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
index ad2bf5720a..7375546dad 100644
--- a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
+++ b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     useOnSelect,
diff --git a/libs/components/editor-blocks/src/blocks/file/FileView.tsx b/libs/components/editor-blocks/src/blocks/file/FileView.tsx
index 32dfe08432..58a58bcb73 100644
--- a/libs/components/editor-blocks/src/blocks/file/FileView.tsx
+++ b/libs/components/editor-blocks/src/blocks/file/FileView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { Upload } from '../../components/upload/upload';
 import { services, FileColumnValue } from '@toeverything/datasource/db-service';
diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx
index 770d3792a4..df2871fbda 100644
--- a/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 import { ChildrenView } from '@toeverything/framework/virgo';
 import { styled } from '@toeverything/components/ui';
 import { sleep } from '@toeverything/utils';
diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx
index 0d945b88ef..3a598b3145 100644
--- a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx
@@ -1,8 +1,9 @@
-import { FC } from 'react';
 import { RenderBlock } from '@toeverything/components/editor-core';
 import { ChildrenView, CreateView } from '@toeverything/framework/virgo';
 
-export const GridItemRender = function (creator: FC<ChildrenView>) {
+export const GridItemRender = function (
+    creator: (prop: ChildrenView) => JSX.Element
+) {
     const GridItem = function (props: CreateView) {
         const { block } = props;
         const children = (
diff --git a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
index f87e1c8995..fb5056434a 100644
--- a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { useState } from 'react';
 import { styled } from '@toeverything/components/ui';
 import { BlockEditor } from '@toeverything/framework/virgo';
diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
index 822270f495..4ecf47f3b5 100644
--- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
@@ -1,6 +1,6 @@
 import { RenderBlock } from '@toeverything/components/editor-core';
 import { CreateView } from '@toeverything/framework/virgo';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { GridHandle } from './GirdHandle';
 import { styled } from '@toeverything/components/ui';
 import ReactDOM from 'react-dom';
diff --git a/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx b/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx
index d18cbd79ec..e6c22efe97 100644
--- a/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx
@@ -1,8 +1,7 @@
-import { FC } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { BlockContainer } from '../../components/BlockContainer';
 
-export function GridRender(creator: FC<CreateView>) {
+export function GridRender(creator: (prop: CreateView) => JSX.Element) {
     return function GridWithItem(props: CreateView) {
         const { editor, block } = props;
         return (
diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
index 9ab7dec7ca..826a81cad7 100644
--- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@@ -8,7 +8,7 @@ import {
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import type { CreateView } from '@toeverything/framework/virgo';
-import type { ComponentType, FC } from 'react';
+import type { ComponentType } from 'react';
 import { useState } from 'react';
 import { GroupMenuWrapper } from './group-menu';
 import { SceneKanban } from './scene-kanban';
diff --git a/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx b/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx
index ba73bcd6b7..6145bec114 100644
--- a/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx
@@ -1,6 +1,5 @@
 import { RenderBlockChildren } from '@toeverything/components/editor-core';
 import type { CreateView } from '@toeverything/framework/virgo';
-import { FC } from 'react';
 
 export const ScenePage = ({ block }: CreateView) => {
     return <RenderBlockChildren block={block} />;
diff --git a/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx b/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx
index f7a3422bcf..cb8dd92d6b 100644
--- a/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import type { DefaultColumnsValue } from '@toeverything/datasource/db-service';
 import type { CreateView } from '@toeverything/framework/virgo';
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx
index 7d05d50b70..1ac850d114 100644
--- a/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx
@@ -1,9 +1,9 @@
 import { styled } from '@toeverything/components/ui';
-import type { FC } from 'react';
+
 import type { SvgIconProps } from '@toeverything/components/ui';
 
 interface Props {
-    Icon: FC<SvgIconProps>;
+    Icon: (prop: SvgIconProps) => JSX.Element;
     text?: string;
     onClick: () => void;
 }
diff --git a/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx b/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx
index bb5d1f3c9c..e72f6b106b 100644
--- a/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx
+++ b/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 
 export const GroupDividerView = ({ block, editor }: CreateView) => {
diff --git a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx
index 3a7eb0fbc7..692b63e17e 100644
--- a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx
+++ b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx
@@ -6,7 +6,7 @@ import {
 import { styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
 import { CreateView } from '@toeverything/framework/virgo';
-import { FC, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Image as SourceView } from '../../components/ImageView';
 import { Upload } from '../../components/upload/upload';
 import { SCENE_CONFIG } from '../group/config';
diff --git a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
index 80fd350776..ec0d690c96 100644
--- a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
+++ b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
@@ -5,7 +5,7 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { type CreateView } from '@toeverything/framework/virgo';
-import { useEffect, useRef, useState, type FC } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
     TextManage,
     type ExtendedTextUtils,
diff --git a/libs/components/editor-blocks/src/blocks/page/PageView.tsx b/libs/components/editor-blocks/src/blocks/page/PageView.tsx
index 64ea3c9536..64fba3ca83 100644
--- a/libs/components/editor-blocks/src/blocks/page/PageView.tsx
+++ b/libs/components/editor-blocks/src/blocks/page/PageView.tsx
@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect, useMemo, useState } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router';
 
 import { BackLink, TextProps } from '@toeverything/components/common';
diff --git a/libs/components/editor-blocks/src/blocks/page/index.ts b/libs/components/editor-blocks/src/blocks/page/index.ts
index 3feac2f14e..412bbdbd7c 100644
--- a/libs/components/editor-blocks/src/blocks/page/index.ts
+++ b/libs/components/editor-blocks/src/blocks/page/index.ts
@@ -13,9 +13,9 @@ import {
 } from '@toeverything/framework/virgo';
 
 import { PageView } from './PageView';
-import { ComponentType, FC } from 'react';
 
-export const PageChildrenView: FC<ChildrenView> = props => props.children;
+export const PageChildrenView: (prop: ChildrenView) => JSX.Element = props =>
+    props.children;
 
 export class PageBlock extends BaseView {
     type = Protocol.Block.Type.page;
diff --git a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
index 07d66175f8..e75773b641 100644
--- a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
+++ b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { InlineRefLink } from '@toeverything/components/common';
 import { CreateView } from '@toeverything/framework/virgo';
diff --git a/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx b/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx
index ddd42c6212..f62dfae040 100644
--- a/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx
+++ b/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx
@@ -10,13 +10,13 @@ import {
     getTextProperties,
     SelectBlock,
 } from '@toeverything/framework/virgo';
-import { FC } from 'react';
+
 import { TextView } from './TextView';
 
 export class QuoteBlock extends BaseView {
     type = Protocol.Block.Type.quote;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     // override ChildrenView = IndentWrapper;
 
@@ -83,7 +83,7 @@ export class QuoteBlock extends BaseView {
 export class CalloutBlock extends BaseView {
     type = Protocol.Block.Type.callout;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     // override ChildrenView = IndentWrapper;
 
diff --git a/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx b/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx
index 1a1a366443..64902e252d 100644
--- a/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx
+++ b/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx
@@ -11,13 +11,13 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { TextView } from './TextView';
-import { FC } from 'react';
+
 import { getRandomString } from '@toeverything/components/common';
 
 export class TextBlock extends BaseView {
     type = Protocol.Block.Type.text;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
@@ -134,7 +134,7 @@ export class TextBlock extends BaseView {
 export class Heading1Block extends BaseView {
     type = Protocol.Block.Type.heading1;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
@@ -199,7 +199,7 @@ export class Heading1Block extends BaseView {
 export class Heading2Block extends BaseView {
     type = Protocol.Block.Type.heading2;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
@@ -264,7 +264,7 @@ export class Heading2Block extends BaseView {
 export class Heading3Block extends BaseView {
     type = Protocol.Block.Type.heading3;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx
index d28218a171..2a9d77d577 100644
--- a/libs/components/editor-blocks/src/blocks/text/TextView.tsx
+++ b/libs/components/editor-blocks/src/blocks/text/TextView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 
 import { CustomText, TextProps } from '@toeverything/components/common';
 import {
diff --git a/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx b/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx
index bc1b5397b4..4beca7e2cf 100644
--- a/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx
+++ b/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     is_heading_child_type,
diff --git a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx
index 67641c8bb5..cb13048a3a 100644
--- a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx
+++ b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@toeverything/components/ui';
-import { FC, useMemo } from 'react';
+import { useMemo } from 'react';
 
 interface CheckBoxProps {
     size?: number;
diff --git a/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx b/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx
index cf16857099..961aa92735 100644
--- a/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx
+++ b/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx
@@ -5,7 +5,7 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { AsyncBlock, type CreateView } from '@toeverything/framework/virgo';
-import { useRef, type FC } from 'react';
+import { useRef } from 'react';
 import {
     TextManage,
     type ExtendedTextUtils,
diff --git a/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx b/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx
index d5b385fbdf..b9c436034c 100644
--- a/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx
+++ b/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { Upload } from '../../components/upload/upload';
 import { SourceView } from '../../components/source-view';
diff --git a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
index 603846a5a6..00da92a813 100644
--- a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
+++ b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { styled } from '@toeverything/components/ui';
 import { AsyncBlock, BlockEditor } from '@toeverything/framework/virgo';
 
diff --git a/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx b/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx
index 54acf2bdbe..fda1bbc359 100644
--- a/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx
+++ b/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx
@@ -1,5 +1,5 @@
 import { AsyncBlock } from '@toeverything/framework/virgo';
-import { FC } from 'react';
+
 import { ResizableBox } from 'react-resizable';
 import { styled } from '@toeverything/components/ui';
 
diff --git a/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx b/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx
index b8ff537d96..93aa9d34a1 100644
--- a/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx
+++ b/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { ChildrenView } from '@toeverything/framework/virgo';
 import { styled } from '@toeverything/components/ui';
 
diff --git a/libs/components/editor-blocks/src/components/editable/editable.tsx b/libs/components/editor-blocks/src/components/editable/editable.tsx
index fbf80482f8..41a4b2ff14 100644
--- a/libs/components/editor-blocks/src/components/editable/editable.tsx
+++ b/libs/components/editor-blocks/src/components/editable/editable.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { useMemo } from 'react';
 import { createEditor } from 'slate';
 import { Slate, Editable as SlateEditable, withReact } from 'slate-react';
 import { ErrorBoundary } from '@toeverything/utils';
diff --git a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
index 5a4488cf3f..b03189d7d4 100644
--- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
+++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
@@ -4,14 +4,7 @@ import {
     useLazyIframe,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
-import {
-    FC,
-    ReactElement,
-    ReactNode,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { SCENE_CONFIG } from '../../blocks/group/config';
 import { BlockPreview } from './BlockView';
 import { formatUrl } from './format-url';
diff --git a/libs/components/editor-blocks/src/components/table/basic-table.tsx b/libs/components/editor-blocks/src/components/table/basic-table.tsx
index 875e560514..04507ddebd 100644
--- a/libs/components/editor-blocks/src/components/table/basic-table.tsx
+++ b/libs/components/editor-blocks/src/components/table/basic-table.tsx
@@ -6,7 +6,7 @@ import {
     useLayoutEffect,
     useCallback,
 } from 'react';
-import type { FC } from 'react';
+
 import { VariableSizeGrid, areEqual } from 'react-window';
 import type {
     GridChildComponentProps,
@@ -34,7 +34,7 @@ export interface CustomCellProps<T = unknown> {
     value: T;
     valueKey: string;
 }
-export type CustomCell<T = unknown> = FC<CustomCellProps<T>>;
+export type CustomCell<T = unknown> = (prop: CustomCellProps<T>) => JSX.Element;
 
 interface TableData {
     columns: readonly TableColumn[];
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx
index 423f0cc29c..414c974cbc 100644
--- a/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Checkbox } from '@toeverything/components/ui';
 import type { BooleanColumnValue } from '@toeverything/datasource/db-service';
 import type { CellProps } from '../types';
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx
index 9669917564..466753bfae 100644
--- a/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { ColumnType } from '@toeverything/datasource/db-service';
 import type { CustomCellProps as TableCustomCellProps } from '../basic-table';
 import { DEFAULT_RENDER_CELL } from '../basic-table';
@@ -16,7 +15,7 @@ const DefaultCell = ({ onChange, ...props }: CellProps) => {
 /**
  * @deprecated
  */
-const cellMap: Record<ColumnType, FC<CellProps<any>>> = {
+const cellMap: Record<ColumnType, (prop: CellProps<any>) => JSX.Element> = {
     [ColumnType.content]: DefaultCell,
     [ColumnType.number]: DefaultCell,
     [ColumnType.enum]: SelectCell,
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx
index ed20999507..f383857023 100644
--- a/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { useMemo } from 'react';
 import { OldSelect } from '@toeverything/components/ui';
 import type { EnumColumnValue } from '@toeverything/datasource/db-service';
diff --git a/libs/components/editor-blocks/src/components/table/table.tsx b/libs/components/editor-blocks/src/components/table/table.tsx
index 73dd421081..d7c0274b44 100644
--- a/libs/components/editor-blocks/src/components/table/table.tsx
+++ b/libs/components/editor-blocks/src/components/table/table.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { BasicTable } from './basic-table';
 import type { BasicTableProps } from './basic-table';
 
diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx
index 279a74f2c9..d9a4ed6f0b 100644
--- a/libs/components/editor-blocks/src/components/upload/upload.tsx
+++ b/libs/components/editor-blocks/src/components/upload/upload.tsx
@@ -1,5 +1,4 @@
 import {
-    FC,
     useRef,
     ChangeEvent,
     ReactElement,
diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
index d9dcdd57cc..955cbc5b9f 100644
--- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
+++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
index 63d01064d9..b6e066208d 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react';
+import { useRef } from 'react';
 import { AsyncBlock } from '../../editor';
 import { PendantHistoryPanel } from '../pendant-history-panel';
 import {
diff --git a/libs/components/editor-core/src/block-pendant/types.ts b/libs/components/editor-core/src/block-pendant/types.ts
index d141f621b7..83dd1adb80 100644
--- a/libs/components/editor-core/src/block-pendant/types.ts
+++ b/libs/components/editor-core/src/block-pendant/types.ts
@@ -4,7 +4,6 @@ import {
     SelectOption,
     SelectOptionId,
 } from '../recast-block';
-import { FunctionComponent } from 'react';
 import { TextFontIcon } from '@toeverything/components/icons';
 
 export { PropertyType as PendantTypes } from '../recast-block';
diff --git a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx
index 96dc07676a..4c87ccc8e8 100644
--- a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx
+++ b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { AsyncBlock } from '../editor';
 import { RenderBlock } from './RenderBlock';
 
diff --git a/libs/components/editor-plugins/src/comment/AddCommentActions.tsx b/libs/components/editor-plugins/src/comment/AddCommentActions.tsx
index e01679fbdd..855330336d 100644
--- a/libs/components/editor-plugins/src/comment/AddCommentActions.tsx
+++ b/libs/components/editor-plugins/src/comment/AddCommentActions.tsx
@@ -1,4 +1,4 @@
-import { useCallback, type FC, type MouseEvent } from 'react';
+import { useCallback, type MouseEvent } from 'react';
 import {
     styled,
     Tooltip,
@@ -83,7 +83,7 @@ export const AddCommentActions = ({
 };
 
 type IconButtonWithTooltipProps = {
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
     tooltip?: string;
 };
 
diff --git a/libs/components/editor-plugins/src/menu/command-menu/config.ts b/libs/components/editor-plugins/src/menu/command-menu/config.ts
index 8aa740f7a0..9c06bc81ed 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/config.ts
+++ b/libs/components/editor-plugins/src/menu/command-menu/config.ts
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import {
     HeadingOneIcon,
     HeadingTwoIcon,
@@ -40,7 +39,7 @@ type ClickItemHandler = (
 export type CommandMenuDataType = {
     type: BlockFlavorKeys;
     text: string;
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
 };
 
 export const commonCommandMenuHandler: ClickItemHandler = async (
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
index 25d5c570d2..80df07e413 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
@@ -135,7 +135,9 @@ export const MenuDropdownItem = ({
     );
 };
 
-const withStylesForIcon = (FontIconComponent: React.FC<SvgIconProps>) =>
+const withStylesForIcon = (
+    FontIconComponent: (prop: SvgIconProps) => JSX.Element
+) =>
     styled(FontIconComponent, {
         shouldForwardProp: (prop: string) =>
             !['fontColor', 'fontBgColor'].includes(prop),
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/types.ts b/libs/components/editor-plugins/src/menu/inline-menu/types.ts
index ac5fedfb1a..bdd7bee447 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/types.ts
+++ b/libs/components/editor-plugins/src/menu/inline-menu/types.ts
@@ -1,4 +1,3 @@
-import React, { type FC } from 'react';
 import type { SvgIconProps } from '@toeverything/components/ui';
 import type { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
 import { inlineMenuNames, INLINE_MENU_UI_TYPES } from './config';
@@ -23,7 +22,7 @@ export type ClickItemHandler = ({
 
 export type IconItemType = {
     type: typeof INLINE_MENU_UI_TYPES['icon'];
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
     nameKey: InlineMenuNamesType;
     name: typeof inlineMenuNames[InlineMenuNamesType];
     onClick?: ClickItemHandler;
@@ -32,7 +31,7 @@ export type IconItemType = {
 
 export type DropdownItemType = {
     type: typeof INLINE_MENU_UI_TYPES['dropdown'];
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
     nameKey: InlineMenuNamesType;
     name: typeof inlineMenuNames[InlineMenuNamesType];
     children: IconItemType[];
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
index f9d9e947d6..71e11e4679 100644
--- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
@@ -1,7 +1,6 @@
 import {
     useState,
     useEffect,
-    FC,
     type MouseEvent,
     type DragEvent,
     type ReactNode,
diff --git a/libs/components/icons/src/auto-icons/index.ts b/libs/components/icons/src/auto-icons/index.ts
index f59db7967f..8ea2f6c0a0 100644
--- a/libs/components/icons/src/auto-icons/index.ts
+++ b/libs/components/icons/src/auto-icons/index.ts
@@ -1,4 +1,4 @@
-export const timestamp = 1660239514133;
+export const timestamp = 1660270988401;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
index c4c0503ddf..6fa7ac73f4 100644
--- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { DocMode } from './type';
 import { styled } from '@toeverything/components/ui';
 import { StatusIcon } from './StatusIcon';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx
index ab2a976624..2974644067 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { styled } from '@toeverything/components/ui';
 import { LastModified } from './LastModified';
 import { Logout } from './Logout';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
index e7e937a90f..6619d0191f 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import format from 'date-fns/format';
 import { Typography, styled } from '@toeverything/components/ui';
 import { useUserAndSpaces } from '@toeverything/datasource/state';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
index 0acd0b3e6a..2c2d429034 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { MoveToIcon } from '@toeverything/components/icons';
 import {
     ListItem,
diff --git a/libs/components/ui/src/button/IconButton.tsx b/libs/components/ui/src/button/IconButton.tsx
index ab66b36cfc..43773d46ba 100644
--- a/libs/components/ui/src/button/IconButton.tsx
+++ b/libs/components/ui/src/button/IconButton.tsx
@@ -1,5 +1,4 @@
 import type {
-    FC,
     MouseEventHandler,
     CSSProperties,
     PropsWithChildren,
diff --git a/libs/components/ui/src/button/ListButton.tsx b/libs/components/ui/src/button/ListButton.tsx
index f5b4371873..d29db359b4 100644
--- a/libs/components/ui/src/button/ListButton.tsx
+++ b/libs/components/ui/src/button/ListButton.tsx
@@ -41,7 +41,7 @@ type ListButtonProps = {
     content?: string;
     children?: () => JSX.Element;
     hover?: boolean;
-    icon?: React.FC<SvgIconProps>;
+    icon?: (prop: SvgIconProps) => JSX.Element;
 };
 
 export const ListButton = (props: ListButtonProps) => {
diff --git a/libs/components/ui/src/divider/Divider.tsx b/libs/components/ui/src/divider/Divider.tsx
index f25834bd14..86fc8ee923 100644
--- a/libs/components/ui/src/divider/Divider.tsx
+++ b/libs/components/ui/src/divider/Divider.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode, CSSProperties } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 import { styled } from '../styled';
 import { MuiDivider } from '../mui';
 import type { MuiDividerProps } from '../mui';
diff --git a/libs/components/ui/src/list/ListItem.tsx b/libs/components/ui/src/list/ListItem.tsx
index 9b002db372..080aff416f 100644
--- a/libs/components/ui/src/list/ListItem.tsx
+++ b/libs/components/ui/src/list/ListItem.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren, CSSProperties } from 'react';
+import type { PropsWithChildren, CSSProperties } from 'react';
 import { Clickable } from '../clickable';
 import { styled } from '../styled';
 
diff --git a/libs/components/ui/src/select/OldSelect.tsx b/libs/components/ui/src/select/OldSelect.tsx
index d10989a1ad..0c49c67c8a 100644
--- a/libs/components/ui/src/select/OldSelect.tsx
+++ b/libs/components/ui/src/select/OldSelect.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { styled } from '../styled';
-import type { FC, CSSProperties, ChangeEvent } from 'react';
+import type { CSSProperties, ChangeEvent } from 'react';
 
 /**
  * WARNING: This component is about to be deprecated, use Select replace
diff --git a/libs/components/ui/src/slider/Slider.tsx b/libs/components/ui/src/slider/Slider.tsx
index 2e22114e77..b676ca1cab 100644
--- a/libs/components/ui/src/slider/Slider.tsx
+++ b/libs/components/ui/src/slider/Slider.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';
 import type { SliderUnstyledProps } from '@mui/base';
 import { alpha } from '@mui/system';
diff --git a/libs/components/ui/src/tag/Tag.tsx b/libs/components/ui/src/tag/Tag.tsx
index 70ffc2aa7c..5c582b6da3 100644
--- a/libs/components/ui/src/tag/Tag.tsx
+++ b/libs/components/ui/src/tag/Tag.tsx
@@ -1,5 +1,4 @@
 import type {
-    FC,
     ChangeEventHandler,
     PropsWithChildren,
     CSSProperties,
diff --git a/libs/components/ui/src/theme/utils.tsx b/libs/components/ui/src/theme/utils.tsx
index 5bccadf10b..c31f47d124 100644
--- a/libs/components/ui/src/theme/utils.tsx
+++ b/libs/components/ui/src/theme/utils.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {
     createTheme,
@@ -30,8 +30,8 @@ export const ThemeProvider = ({ children }: { children?: ReactNode }) => {
 export const useTheme = () => muiUseTheme();
 
 export const withTheme = <T,>(
-    Component: FC<T & { theme: MuiTheme }>
-): FC<T> => {
+    Component: (prop: T & { theme: MuiTheme }) => JSX.Element
+): ((prop: T) => JSX.Element) => {
     return props => {
         const theme = useTheme();
         return <Component {...props} theme={theme} />;
diff --git a/libs/utils/src/error-boundary.tsx b/libs/utils/src/error-boundary.tsx
index aab130fc9a..56a4d2a73d 100644
--- a/libs/utils/src/error-boundary.tsx
+++ b/libs/utils/src/error-boundary.tsx
@@ -24,10 +24,7 @@ interface ErrorBoundaryPropsWithComponent {
 
 declare function FallbackRender(
     props: FallbackProps
-): React.ReactElement<
-    unknown,
-    string | React.FunctionComponent | typeof React.Component
-> | null;
+): React.ReactElement<unknown, string | typeof React.Component> | null;
 
 interface ErrorBoundaryPropsWithRender {
     onResetKeysChange?: (
@@ -52,7 +49,7 @@ interface ErrorBoundaryPropsWithFallback {
     resetKeys?: Array<unknown>;
     fallback: React.ReactElement<
         unknown,
-        string | React.FunctionComponent | typeof React.Component
+        string | typeof React.Component
     > | null;
     FallbackComponent?: never;
     fallbackRender?: never;
diff --git a/tools/executors/svgOptimize/svgo.js b/tools/executors/svgOptimize/svgo.js
index 0f8902ed86..a0f6c21539 100644
--- a/tools/executors/svgOptimize/svgo.js
+++ b/tools/executors/svgOptimize/svgo.js
@@ -84,9 +84,8 @@ async function getJSXContent(name, svgCode) {
     }
     let matcher = svgrContent.match(/<svg ([^\>]+)>([\s\S]*?)<\/svg>/);
     return `
-import { FC } from 'react';
 import { SvgIcon, SvgIconProps } from '@mui/material';
-export const ${name}Icon: FC<SvgIconProps> = (props) => (
+export const ${name}Icon = (props: SvgIconProps) => (
     <SvgIcon  ${matcher[1]}>
     ${matcher[2]}
     </SvgIcon>