diff --git a/src/App.vue b/src/App.vue
index 3f554c2cc6dd0c00a7331b44660c6ba6f1c30b54..5d7fad2417fb04209761d32c254afba51316f233 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,8 +71,9 @@ import ActionBar from '@/components/ActionBar.vue'
 import CodeModal from '@/components/CodeModal.vue'
 import Configurator from '@/components/Configurator.vue'
 import DownloadModal from '@/components/DownloadModal.vue'
-import type { VueColorAvatarRef } from '@/components/VueColorAvatar.vue'
-import VueColorAvatar from '@/components/VueColorAvatar.vue'
+import VueColorAvatar, {
+  type VueColorAvatarRef,
+} from '@/components/VueColorAvatar.vue'
 import { ActionType } from '@/enums'
 import { useAvatarOption } from '@/hooks'
 import Container from '@/layouts/Container.vue'
diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue
index 35ffc31370515a5f64fe92f0095d28a2d83edf73..40ee789e5ea038c7f6d213a12e2193a20c5bbeb6 100644
--- a/src/components/Configurator.vue
+++ b/src/components/Configurator.vue
@@ -70,8 +70,7 @@ import { useI18n } from 'vue-i18n'
 
 import PerfectScrollbar from '@/components/PerfectScrollbar.vue'
 import SectionWrapper from '@/components/SectionWrapper.vue'
-import type { WidgetShape, WrapperShape } from '@/enums'
-import { WidgetType } from '@/enums'
+import { type WidgetShape, type WrapperShape, WidgetType } from '@/enums'
 import { useAvatarOption } from '@/hooks'
 import { SETTINGS } from '@/utils/constant'
 import { previewData } from '@/utils/dynamic-data'
diff --git a/src/components/VueColorAvatar.vue b/src/components/VueColorAvatar.vue
index cf2570f7c0fbb19fb94d40ad95f4ab6ed3dbe0bc..eeee0a0c5bae98032c449013f696d16b170e4332 100644
--- a/src/components/VueColorAvatar.vue
+++ b/src/components/VueColorAvatar.vue
@@ -24,7 +24,7 @@ export interface VueColorAvatarRef {
 import { ref, toRefs, watchEffect } from 'vue'
 
 import { WrapperShape } from '@/enums'
-import type { AvatarOption } from '@/types'
+import { type AvatarOption } from '@/types'
 import { getRandomAvatarOption } from '@/utils'
 import { AVATAR_LAYER, NONE } from '@/utils/constant'
 import { widgetData } from '@/utils/dynamic-data'
diff --git a/src/components/widgets/Background.vue b/src/components/widgets/Background.vue
index 8f3e9a0e2cbfbca010b4d07565bc059e12b49d05..b4715da032d851bfa7eaea0f1030e0fcf0af150d 100644
--- a/src/components/widgets/Background.vue
+++ b/src/components/widgets/Background.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { AvatarOption } from '../../types'
+import { type AvatarOption } from '../../types'
 
 interface BackgroundProps {
   color: AvatarOption['background']['color']
diff --git a/src/env.d.ts b/src/env.d.ts
index 6154aca7cc5ad414c2003bf7b8d1b34b406a046a..d9fd0593494edf88b5d59f6d0526becf69b51659 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import { type DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component
diff --git a/src/hooks/useAvatarOption.ts b/src/hooks/useAvatarOption.ts
index b204899428c1b08a9c3b2de86d2870119cc64dc4..ab05fc767f8b20bbf7198f9eb83b5e1dd2bc492e 100644
--- a/src/hooks/useAvatarOption.ts
+++ b/src/hooks/useAvatarOption.ts
@@ -2,7 +2,7 @@ import { computed } from 'vue'
 
 import { useStore } from '@/store'
 import { SET_AVATAR_OPTION } from '@/store/mutation-type'
-import type { AvatarOption } from '@/types'
+import { type AvatarOption } from '@/types'
 
 export default function useAvatarOption() {
   const store = useStore()
diff --git a/src/store/index.ts b/src/store/index.ts
index a1fc0002ec2661955ffc114390fd78a1a2f09aaa..ccbc134bbc66d3aece32c4168966142b5e8d6ac5 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,8 @@
-import type { InjectionKey } from 'vue'
-import type { Store } from 'vuex'
-import { createStore, useStore as baseUseStore } from 'vuex'
+import { type InjectionKey } from 'vue'
+import { type Store, createStore, useStore as baseUseStore } from 'vuex'
 
 import { WrapperShape } from '@/enums'
-import type { AvatarOption } from '@/types'
+import { type AvatarOption } from '@/types'
 import { getRandomAvatarOption } from '@/utils'
 import { SCREEN } from '@/utils/constant'
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 171d7b2d867a7a063a80d08f5b270138a699a0b9..211cf3ea7762bdcfd943696479a23b7c7f0c3628 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,21 +1,21 @@
-import type { NONE } from '@/utils/constant'
+import { type NONE } from '@/utils/constant'
 
 export type None = typeof NONE
 
-import type {
-  BeardShape,
-  ClothesShape,
-  EarringsShape,
-  EarShape,
-  EyebrowsShape,
-  EyesShape,
-  FaceShape,
-  Gender,
-  GlassesShape,
-  MouthShape,
-  NoseShape,
-  TopsShape,
-  WrapperShape,
+import {
+  type BeardShape,
+  type ClothesShape,
+  type EarringsShape,
+  type EarShape,
+  type EyebrowsShape,
+  type EyesShape,
+  type FaceShape,
+  type Gender,
+  type GlassesShape,
+  type MouthShape,
+  type NoseShape,
+  type TopsShape,
+  type WrapperShape,
 } from '../enums'
 
 interface Widget<Shape> {
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index edabb31bbea9d38f4f3e21df51580d1091fdd288..4899fe0b706d2acb92c8c4bf8727422d6e7fc664 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,4 +1,4 @@
-import type { AvatarOption, AvatarSettings } from '@/types'
+import { type AvatarOption, type AvatarSettings } from '@/types'
 
 import {
   BeardShape,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a236c221157130e5896cc9d84005e461ae44d0bb..164cdaff0820747adf114b888f3ba63581ed0fa7 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,11 @@
-import type { EarringsShape, GlassesShape } from '@/enums'
-import { BeardShape, Gender, TopsShape } from '@/enums'
-import type { AvatarOption, None } from '@/types'
+import {
+  type EarringsShape,
+  type GlassesShape,
+  BeardShape,
+  Gender,
+  TopsShape,
+} from '@/enums'
+import { type AvatarOption, type None } from '@/types'
 
 import { NONE, SETTINGS, SPECIAL_AVATARS } from './constant'