From fece3c226a00db782f01b4b556c2e58c650772a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Wed, 3 Jul 2024 12:03:08 +0200
Subject: [PATCH] feat(icons): migrate icons to composition API

EMP-4438
---
 .../src/components/icons/test-icons.vue       | 158 ++++++++++++++++++
 .../src/components/index.ts                   |   1 +
 packages/_vue3-migration-test/src/router.ts   |   8 +-
 .../src/components/icons/arrow-down.vue       |  13 +-
 .../src/components/icons/arrow-left.vue       |  13 +-
 .../src/components/icons/arrow-right.vue      |  13 +-
 .../src/components/icons/arrow-up.vue         |  13 +-
 .../x-components/src/components/icons/bag.vue |  13 +-
 .../src/components/icons/bar-code.vue         |  13 +-
 .../src/components/icons/barcode-tiny.vue     |  13 +-
 .../src/components/icons/cart-filled.vue      |  13 +-
 .../src/components/icons/cart.vue             |  13 +-
 .../src/components/icons/check-tiny.vue       |  13 +-
 .../src/components/icons/check.vue            |  13 +-
 .../icons/checkbox-selected-filled.vue        |  13 +-
 .../components/icons/checkbox-selected.vue    |  13 +-
 .../icons/checkbox-unselected-filled.vue      |  13 +-
 .../components/icons/checkbox-unselected.vue  |  13 +-
 .../src/components/icons/chevron-down.vue     |  13 +-
 .../src/components/icons/chevron-left.vue     |  13 +-
 .../src/components/icons/chevron-right.vue    |  13 +-
 .../components/icons/chevron-tiny-down.vue    |  13 +-
 .../components/icons/chevron-tiny-left.vue    |  13 +-
 .../components/icons/chevron-tiny-right.vue   |  13 +-
 .../src/components/icons/chevron-tiny-up.vue  |  13 +-
 .../src/components/icons/chevron-up.vue       |  13 +-
 .../components/icons/corner-arrow-left.vue    |  13 +-
 .../components/icons/corner-arrow-right.vue   |  13 +-
 .../src/components/icons/cross-tiny.vue       |  13 +-
 .../src/components/icons/cross.vue            |  13 +-
 .../components/icons/curated-check-filled.vue |  13 +-
 .../icons/curated-check-tiny-filled.vue       |  13 +-
 .../components/icons/curated-check-tiny.vue   |  13 +-
 .../src/components/icons/curated-check.vue    |  13 +-
 .../icons/diagonal-arrow-left-down.vue        |  13 +-
 .../icons/diagonal-arrow-left-top.vue         |  13 +-
 .../icons/diagonal-arrow-right-down.vue       |  13 +-
 .../icons/diagonal-arrow-right-top.vue        |  13 +-
 .../src/components/icons/filters.vue          |  13 +-
 .../src/components/icons/grid-1-col.vue       |  13 +-
 .../src/components/icons/grid-2-col.vue       |  13 +-
 .../src/components/icons/grid-2-rows.vue      |  13 +-
 .../src/components/icons/grid-4-col.vue       |  13 +-
 .../src/components/icons/heart-filled.vue     |  13 +-
 .../src/components/icons/heart.vue            |  13 +-
 .../src/components/icons/hide.vue             |  13 +-
 .../src/components/icons/history-tiny.vue     |  13 +-
 .../src/components/icons/history.vue          |  13 +-
 .../src/components/icons/light-bulb-off.vue   |  13 +-
 .../src/components/icons/light-bulb-on.vue    |  13 +-
 .../src/components/icons/menu.vue             |  13 +-
 .../src/components/icons/minus-tiny.vue       |  13 +-
 .../src/components/icons/minus.vue            |  13 +-
 .../src/components/icons/plus-tiny.vue        |  13 +-
 .../src/components/icons/plus.vue             |  13 +-
 .../components/icons/radiobutton-selected.vue |  13 +-
 .../icons/radiobutton-unselected.vue          |  13 +-
 .../src/components/icons/search-tiny.vue      |  13 +-
 .../src/components/icons/search.vue           |  13 +-
 .../src/components/icons/settings.vue         |  13 +-
 .../src/components/icons/show.vue             |  13 +-
 .../src/components/icons/sort-az.vue          |  13 +-
 .../src/components/icons/sort-price-down.vue  |  13 +-
 .../src/components/icons/sort-price-up.vue    |  13 +-
 .../src/components/icons/sort-relevancy.vue   |  13 +-
 .../src/components/icons/sort-za.vue          |  13 +-
 .../src/components/icons/star-filled.vue      |  13 +-
 .../src/components/icons/star.vue             |  13 +-
 .../src/components/icons/tag-filled.vue       |  13 +-
 .../x-components/src/components/icons/tag.vue |  13 +-
 .../src/components/icons/trash-open.vue       |  13 +-
 .../src/components/icons/trash.vue            |  13 +-
 .../src/components/icons/trending-tiny.vue    |  13 +-
 .../src/components/icons/trending.vue         |  13 +-
 .../src/components/icons/user-filled.vue      |  13 +-
 .../src/components/icons/user.vue             |  13 +-
 76 files changed, 312 insertions(+), 804 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/icons/test-icons.vue

diff --git a/packages/_vue3-migration-test/src/components/icons/test-icons.vue b/packages/_vue3-migration-test/src/components/icons/test-icons.vue
new file mode 100644
index 0000000000..38a173c9f9
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/icons/test-icons.vue
@@ -0,0 +1,158 @@
+<template>
+  <ArrowDownIcon class="test-icons" />
+  <ArrowLeftIcon class="test-icons" />
+  <ArrowRightIcon class="test-icons" />
+  <ArrowUpIcon class="test-icons" />
+  <BagIcon class="test-icons" />
+  <BarCodeIcon class="test-icons" />
+  <BarcodeTinyIcon class="test-icons" />
+  <CartFilledIcon class="test-icons" />
+  <CartIcon class="test-icons" />
+  <CheckIcon class="test-icons" />
+  <CheckTinyIcon class="test-icons" />
+  <CheckboxSelectedFilledIcon class="test-icons" />
+  <CheckboxSelectedIcon class="test-icons" />
+  <CheckboxUnselectedFilledIcon class="test-icons" />
+  <CheckboxUnselectedIcon class="test-icons" />
+  <ChevronDownIcon class="test-icons" />
+  <ChevronLeftIcon class="test-icons" />
+  <ChevronRightIcon class="test-icons" />
+  <ChevronTinyDownIcon class="test-icons" />
+  <ChevronTinyLeftIcon class="test-icons" />
+  <ChevronTinyRightIcon class="test-icons" />
+  <ChevronTinyUpIcon class="test-icons" />
+  <ChevronUpIcon class="test-icons" />
+  <CornerArrowLeft class="test-icons" />
+  <CornerArrowRight class="test-icons" />
+  <CrossIcon class="test-icons" />
+  <CrossTinyIcon class="test-icons" />
+  <CuratedCheckFilledIcon class="test-icons" />
+  <CuratedCheckIcon class="test-icons" />
+  <CuratedCheckTinyFilledIcon class="test-icons" />
+  <CuratedCheckTinyIcon class="test-icons" />
+  <DiagonalArrowLeftDownIcon class="test-icons" />
+  <DiagonalArrowLeftTopIcon class="test-icons" />
+  <DiagonalArrowRightDownIcon class="test-icons" />
+  <DiagonalArrowRightTopIcon class="test-icons" />
+  <FiltersIcon class="test-icons" />
+  <Grid1ColIcon class="test-icons" />
+  <Grid2ColIcon class="test-icons" />
+  <Grid2RowsIcon class="test-icons" />
+  <Grid4ColIcon class="test-icons" />
+  <HeartIcon class="test-icons" />
+  <HeartIconFilled class="test-icons" />
+  <HideIcon class="test-icons" />
+  <HistoryIcon class="test-icons" />
+  <HistoryTinyIcon class="test-icons" />
+  <LightBulbOff class="test-icons" />
+  <LightBulbOn class="test-icons" />
+  <MenuIcon class="test-icons" />
+  <MinusIcon class="test-icons" />
+  <MinusTinyIcon class="test-icons" />
+  <PlusIcon class="test-icons" />
+  <PlusTinyIcon class="test-icons" />
+  <RadioButtonSelectedIcon class="test-icons" />
+  <RadioButtonUnselectedIcon class="test-icons" />
+  <SearchIcon class="test-icons" />
+  <SearchTinyIcon class="test-icons" />
+  <SettingsIcon class="test-icons" />
+  <ShowIcon class="test-icons" />
+  <SortAZIcon class="test-icons" />
+  <SortPriceDownIcon class="test-icons" />
+  <SortPriceUpIcon class="test-icons" />
+  <SortRelevancyIcon class="test-icons" />
+  <SortZAIcon class="test-icons" />
+  <StarFilledIcon class="test-icons" />
+  <StarIcon class="test-icons" />
+  <TagFilledIcon class="test-icons" />
+  <TagIcon class="test-icons" />
+  <TrashIcon class="test-icons" />
+  <TrashOpenIcon class="test-icons" />
+  <TrendingIcon class="test-icons" />
+  <TrendingTinyIcon class="test-icons" />
+  <UserFilledIcon class="test-icons" />
+  <UserIcon class="test-icons" />
+</template>
+<script setup lang="ts">
+  import {
+    ArrowDownIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    ArrowUpIcon,
+    BagIcon,
+    BarCodeIcon,
+    BarcodeTinyIcon,
+    CartFilledIcon,
+    CartIcon,
+    CheckIcon,
+    CheckTinyIcon,
+    CheckboxSelectedFilledIcon,
+    CheckboxSelectedIcon,
+    CheckboxUnselectedFilledIcon,
+    CheckboxUnselectedIcon,
+    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronTinyDownIcon,
+    ChevronTinyLeftIcon,
+    ChevronTinyRightIcon,
+    ChevronTinyUpIcon,
+    ChevronUpIcon,
+    CornerArrowLeft,
+    CornerArrowRight,
+    CrossIcon,
+    CrossTinyIcon,
+    CuratedCheckFilledIcon,
+    CuratedCheckIcon,
+    CuratedCheckTinyFilledIcon,
+    CuratedCheckTinyIcon,
+    DiagonalArrowLeftDownIcon,
+    DiagonalArrowLeftTopIcon,
+    DiagonalArrowRightDownIcon,
+    DiagonalArrowRightTopIcon,
+    FiltersIcon,
+    Grid1ColIcon,
+    Grid2ColIcon,
+    Grid2RowsIcon,
+    Grid4ColIcon,
+    HeartIcon,
+    HeartIconFilled,
+    HideIcon,
+    HistoryIcon,
+    HistoryTinyIcon,
+    LightBulbOff,
+    LightBulbOn,
+    MenuIcon,
+    MinusIcon,
+    MinusTinyIcon,
+    PlusIcon,
+    PlusTinyIcon,
+    RadioButtonSelectedIcon,
+    RadioButtonUnselectedIcon,
+    SearchIcon,
+    SearchTinyIcon,
+    SettingsIcon,
+    ShowIcon,
+    SortAZIcon,
+    SortPriceDownIcon,
+    SortPriceUpIcon,
+    SortRelevancyIcon,
+    SortZAIcon,
+    StarFilledIcon,
+    StarIcon,
+    TagFilledIcon,
+    TagIcon,
+    TrashIcon,
+    TrashOpenIcon,
+    TrendingIcon,
+    TrendingTinyIcon,
+    UserFilledIcon,
+    UserIcon
+  } from '../../../../x-components/src/components/icons';
+</script>
+<style scoped lang="scss">
+  .test-icons {
+    height: 40px;
+    width: 40px;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index c845db065a..78b2223a4e 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -17,3 +17,4 @@ export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
 export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
 export { default as TestSearch } from './test-search.vue';
 export { default as TestTagging } from './tagging/test-tagging.vue';
+export { default as TestIcons } from './icons/test-icons.vue';
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index ce24a8afac..b7461741bf 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -45,7 +45,8 @@ import {
   TestRedirection,
   TestExtraParams,
   TestSearch,
-  TestTagging
+  TestTagging,
+  TestIcons
 } from './';
 
 const routes = [
@@ -278,6 +279,11 @@ const routes = [
     path: '/tagging',
     name: 'Tagging',
     component: TestTagging
+  },
+  {
+    path: '/icons',
+    name: 'Icons',
+    component: TestIcons
   }
 ];
 
diff --git a/packages/x-components/src/components/icons/arrow-down.vue b/packages/x-components/src/components/icons/arrow-down.vue
index 57c502dd34..604b21791d 100644
--- a/packages/x-components/src/components/icons/arrow-down.vue
+++ b/packages/x-components/src/components/icons/arrow-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 1.5L4 6.24683"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/arrow-left.vue b/packages/x-components/src/components/icons/arrow-left.vue
index 11fa581335..7c82e1661f 100644
--- a/packages/x-components/src/components/icons/arrow-left.vue
+++ b/packages/x-components/src/components/icons/arrow-left.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 4H1.75317"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/arrow-right.vue b/packages/x-components/src/components/icons/arrow-right.vue
index 9422300e5f..27731b64e0 100644
--- a/packages/x-components/src/components/icons/arrow-right.vue
+++ b/packages/x-components/src/components/icons/arrow-right.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 4H6.24683"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/arrow-up.vue b/packages/x-components/src/components/icons/arrow-up.vue
index a9aae84904..76f4692fbf 100644
--- a/packages/x-components/src/components/icons/arrow-up.vue
+++ b/packages/x-components/src/components/icons/arrow-up.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 6.5L4 1.75317"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/bag.vue b/packages/x-components/src/components/icons/bag.vue
index 7aab7a6076..40d5a1fed1 100644
--- a/packages/x-components/src/components/icons/bag.vue
+++ b/packages/x-components/src/components/icons/bag.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.8 2.29995H6.29995M2.33333 1.19995L1.5 2.29995V6.42561C2.61092 6.42561 4.85446 6.42561 6.5 6.42561V2.29995L5.66667 1.19995H2.33333Z"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/bar-code.vue b/packages/x-components/src/components/icons/bar-code.vue
index ae9dc64358..a5506f6840 100644
--- a/packages/x-components/src/components/icons/bar-code.vue
+++ b/packages/x-components/src/components/icons/bar-code.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.75 2V6M3.8501 2V6M4.25 2V6M5.25 2V6M1 1H7V7H1V1Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/barcode-tiny.vue b/packages/x-components/src/components/icons/barcode-tiny.vue
index 2f78394091..7661864314 100644
--- a/packages/x-components/src/components/icons/barcode-tiny.vue
+++ b/packages/x-components/src/components/icons/barcode-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.16667 2.67202V5.33869M3.83334 2.67202V5.33869M4.16667 2.67202V5.33869M4.83334 2.67202V5.33869M2 2.00537H6V6.00537H2V2.00537Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/cart-filled.vue b/packages/x-components/src/components/icons/cart-filled.vue
index f0484e03f7..4ea260a873 100644
--- a/packages/x-components/src/components/icons/cart-filled.vue
+++ b/packages/x-components/src/components/icons/cart-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
       fill="currentColor"
@@ -23,7 +18,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/cart.vue b/packages/x-components/src/components/icons/cart.vue
index 3a83304cf0..d58deefe1e 100644
--- a/packages/x-components/src/components/icons/cart.vue
+++ b/packages/x-components/src/components/icons/cart.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/check-tiny.vue b/packages/x-components/src/components/icons/check-tiny.vue
index 16f40c575d..0edfef1440 100644
--- a/packages/x-components/src/components/icons/check-tiny.vue
+++ b/packages/x-components/src/components/icons/check-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 2.50537C5.08333 3.50537 4.16667 4.50537 3.25 5.50537L2 4.14173"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/check.vue b/packages/x-components/src/components/icons/check.vue
index dc12e1920f..9f58561b98 100644
--- a/packages/x-components/src/components/icons/check.vue
+++ b/packages/x-components/src/components/icons/check.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 1.80005L2.875 6.30005L1 4.25459"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/checkbox-selected-filled.vue b/packages/x-components/src/components/icons/checkbox-selected-filled.vue
index 2b88f21e83..e981975ccc 100644
--- a/packages/x-components/src/components/icons/checkbox-selected-filled.vue
+++ b/packages/x-components/src/components/icons/checkbox-selected-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
@@ -25,7 +20,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/checkbox-selected.vue b/packages/x-components/src/components/icons/checkbox-selected.vue
index f636f58466..e4e09d366d 100644
--- a/packages/x-components/src/components/icons/checkbox-selected.vue
+++ b/packages/x-components/src/components/icons/checkbox-selected.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
@@ -24,7 +19,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/checkbox-unselected-filled.vue b/packages/x-components/src/components/icons/checkbox-unselected-filled.vue
index 41464e2f66..9d2b8847ad 100644
--- a/packages/x-components/src/components/icons/checkbox-unselected-filled.vue
+++ b/packages/x-components/src/components/icons/checkbox-unselected-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
@@ -18,7 +13,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/checkbox-unselected.vue b/packages/x-components/src/components/icons/checkbox-unselected.vue
index 557a0aeb53..202a229a46 100644
--- a/packages/x-components/src/components/icons/checkbox-unselected.vue
+++ b/packages/x-components/src/components/icons/checkbox-unselected.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
@@ -17,7 +12,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-down.vue b/packages/x-components/src/components/icons/chevron-down.vue
index 26cfd91352..9c225f843f 100644
--- a/packages/x-components/src/components/icons/chevron-down.vue
+++ b/packages/x-components/src/components/icons/chevron-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.44995 2.75L3.94995 5.25L1.44995 2.75"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-left.vue b/packages/x-components/src/components/icons/chevron-left.vue
index d396e85186..ed413466dc 100644
--- a/packages/x-components/src/components/icons/chevron-left.vue
+++ b/packages/x-components/src/components/icons/chevron-left.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.19995 6.5L2.69995 4L5.19995 1.5"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-right.vue b/packages/x-components/src/components/icons/chevron-right.vue
index c17f3ae16c..ff021d1e41 100644
--- a/packages/x-components/src/components/icons/chevron-right.vue
+++ b/packages/x-components/src/components/icons/chevron-right.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.69995 6.5L5.19995 4L2.69995 1.5"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-tiny-down.vue b/packages/x-components/src/components/icons/chevron-tiny-down.vue
index 25826686c2..27ffda0174 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-down.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 3L4 5L6 3"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-tiny-left.vue b/packages/x-components/src/components/icons/chevron-tiny-left.vue
index 49e0b40c20..805f8fb18b 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-left.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-left.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5 2L3 4L5 6"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-tiny-right.vue b/packages/x-components/src/components/icons/chevron-tiny-right.vue
index f25c6bbee2..088af7497c 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-right.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-right.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3 2L5 4L3 6"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-tiny-up.vue b/packages/x-components/src/components/icons/chevron-tiny-up.vue
index e069a4c8a9..2affd007b0 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-up.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-up.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 5L4 3L2 5"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/chevron-up.vue b/packages/x-components/src/components/icons/chevron-up.vue
index 49abef558b..5e6af0a999 100644
--- a/packages/x-components/src/components/icons/chevron-up.vue
+++ b/packages/x-components/src/components/icons/chevron-up.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.44995 5.25L3.94995 2.75L6.44995 5.25"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/corner-arrow-left.vue b/packages/x-components/src/components/icons/corner-arrow-left.vue
index 4ecc17cfe1..6b272a1193 100644
--- a/packages/x-components/src/components/icons/corner-arrow-left.vue
+++ b/packages/x-components/src/components/icons/corner-arrow-left.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.875 3.18644L1 5.09322L2.875 7M7 1V5.09322H1.15234"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/corner-arrow-right.vue b/packages/x-components/src/components/icons/corner-arrow-right.vue
index 8283983cc5..8feeb12eb4 100644
--- a/packages/x-components/src/components/icons/corner-arrow-right.vue
+++ b/packages/x-components/src/components/icons/corner-arrow-right.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.125 3.18644L7 5.09322L5.125 7M1 1V5.09322H6.84766"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/cross-tiny.vue b/packages/x-components/src/components/icons/cross-tiny.vue
index c155cb7e17..b1f09e8e75 100644
--- a/packages/x-components/src/components/icons/cross-tiny.vue
+++ b/packages/x-components/src/components/icons/cross-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 2L2 6M2 2L6 6"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/cross.vue b/packages/x-components/src/components/icons/cross.vue
index e123291a0c..26e644b660 100644
--- a/packages/x-components/src/components/icons/cross.vue
+++ b/packages/x-components/src/components/icons/cross.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 1L1 7M1 1L7 7"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/curated-check-filled.vue b/packages/x-components/src/components/icons/curated-check-filled.vue
index ecd89107f2..0ebb0ed1e0 100644
--- a/packages/x-components/src/components/icons/curated-check-filled.vue
+++ b/packages/x-components/src/components/icons/curated-check-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -24,7 +19,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/curated-check-tiny-filled.vue b/packages/x-components/src/components/icons/curated-check-tiny-filled.vue
index bf3eaba041..2226b6ad64 100644
--- a/packages/x-components/src/components/icons/curated-check-tiny-filled.vue
+++ b/packages/x-components/src/components/icons/curated-check-tiny-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -24,7 +19,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/curated-check-tiny.vue b/packages/x-components/src/components/icons/curated-check-tiny.vue
index cd1ce70815..7cd6ee0243 100644
--- a/packages/x-components/src/components/icons/curated-check-tiny.vue
+++ b/packages/x-components/src/components/icons/curated-check-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -23,7 +18,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/curated-check.vue b/packages/x-components/src/components/icons/curated-check.vue
index dd3fe3ed04..02aac12b5f 100644
--- a/packages/x-components/src/components/icons/curated-check.vue
+++ b/packages/x-components/src/components/icons/curated-check.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -23,7 +18,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue b/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue
index 77f3ac890c..f59d505d0e 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 1.5L1.74683 6.25317M1.49997 2.5027L1.49997 6.5L5.50006 6.5"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue b/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue
index 1c5dc84d37..5d4d70202e 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 6.5L1.74683 1.74683M1.49997 5.4973V1.5H5.50006"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue b/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue
index b60625a56b..20cb32feb7 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 1.5L6.25317 6.25317M2.5027 6.50003L6.5 6.50003L6.5 2.49994"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue b/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue
index 5982f7f98e..b42ccd2105 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 6.5L6.25317 1.74683M6.50003 5.4973V1.5H2.49994"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/filters.vue b/packages/x-components/src/components/icons/filters.vue
index 7343874e5b..7e37cb5218 100644
--- a/packages/x-components/src/components/icons/filters.vue
+++ b/packages/x-components/src/components/icons/filters.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.08125 1.66H4M5.62825 1.66H7M4.14722 6.3C4.14722 6.66451 4.44271 6.96 4.80722 6.96C5.17172 6.96 5.46722 6.66451 5.46722 6.3C5.46722 5.93549 5.17172 5.64 4.80722 5.64C4.44271 5.64 4.14722 5.93549 4.14722 6.3ZM4.14722 6.3L1.08125 6.3M5.5 6.3H7M7 3.98H3.80005M2.34528 3.98H1M5.46722 1.66C5.46722 2.02451 5.17172 2.32 4.80722 2.32C4.44271 2.32 4.14722 2.02451 4.14722 1.66C4.14722 1.29549 4.44271 1 4.80722 1C5.17172 1 5.46722 1.29549 5.46722 1.66ZM2.42638 3.98001C2.42638 4.34452 2.72188 4.64001 3.08638 4.64001C3.45089 4.64001 3.74638 4.34452 3.74638 3.98001C3.74638 3.6155 3.45089 3.32001 3.08638 3.32001C2.72188 3.32001 2.42638 3.6155 2.42638 3.98001Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/grid-1-col.vue b/packages/x-components/src/components/icons/grid-1-col.vue
index bc04202a0c..5b4f55a821 100644
--- a/packages/x-components/src/components/icons/grid-1-col.vue
+++ b/packages/x-components/src/components/icons/grid-1-col.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3 1.5H5V3.5H3V1.5ZM3 4.5H5V6.5H3V4.5Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/grid-2-col.vue b/packages/x-components/src/components/icons/grid-2-col.vue
index c0da9adaff..c7892a2ef6 100644
--- a/packages/x-components/src/components/icons/grid-2-col.vue
+++ b/packages/x-components/src/components/icons/grid-2-col.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 1.5H3.5V3.5H1.5V1.5ZM1.5 4.5H3.5V6.5H1.5V4.5ZM4.5 1.5H6.5V3.5H4.5V1.5ZM4.5 4.5H6.5V6.5H4.5V4.5Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/grid-2-rows.vue b/packages/x-components/src/components/icons/grid-2-rows.vue
index ad4e1616e4..51ac891e38 100644
--- a/packages/x-components/src/components/icons/grid-2-rows.vue
+++ b/packages/x-components/src/components/icons/grid-2-rows.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_168)">
       <path
         d="M7 1H1V3.4H7V1ZM7 4.6H1V7H7V4.6Z"
@@ -20,7 +15,3 @@
     </defs>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/grid-4-col.vue b/packages/x-components/src/components/icons/grid-4-col.vue
index a2f5bf8cd4..2fbabe810d 100644
--- a/packages/x-components/src/components/icons/grid-4-col.vue
+++ b/packages/x-components/src/components/icons/grid-4-col.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.2 1.2H2.51429V2.51429H1.2V1.2ZM1.2 3.34286H2.51429V4.65714H1.2V3.34286ZM1.2 5.48571H2.51429V6.8H1.2V5.48571ZM3.34286 1.2H4.65714V2.51429H3.34286V1.2ZM3.34286 3.34286H4.65714V4.65714H3.34286V3.34286ZM3.34286 5.48571H4.65714V6.8H3.34286V5.48571ZM5.48571 1.2H6.8V2.51429H5.48571V1.2ZM5.48571 3.34286H6.8V4.65714H5.48571V3.34286ZM5.48571 5.48571H6.8V6.8H5.48571V5.48571Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/heart-filled.vue b/packages/x-components/src/components/icons/heart-filled.vue
index 8a3dc2028e..448bbeb8c8 100644
--- a/packages/x-components/src/components/icons/heart-filled.vue
+++ b/packages/x-components/src/components/icons/heart-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.53734 1.86268C6.39074 1.71601 6.21667 1.59965 6.02508 1.52027C5.8335 1.44088 5.62815 1.40002 5.42076 1.40002C5.21338 1.40002 5.00803 1.44088 4.81645 1.52027C4.62486 1.59965 4.45079 1.71601 4.30418 1.86268L3.99992 2.16694L3.69566 1.86268C3.39953 1.56655 2.99788 1.40018 2.57908 1.40018C2.16028 1.40018 1.75864 1.56655 1.4625 1.86268C1.16637 2.15882 1 2.56046 1 2.97926C1 3.39806 1.16637 3.7997 1.4625 4.09584L3.99992 6.63326L6.53734 4.09584C6.68402 3.94923 6.80037 3.77516 6.87976 3.58358C6.95914 3.39199 7 3.18664 7 2.97926C7 2.77188 6.95914 2.56653 6.87976 2.37494C6.80037 2.18336 6.68402 2.00929 6.53734 1.86268Z"
       fill="currentColor"
@@ -15,7 +10,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/heart.vue b/packages/x-components/src/components/icons/heart.vue
index 8b08a5a9af..0f9c3eaab8 100644
--- a/packages/x-components/src/components/icons/heart.vue
+++ b/packages/x-components/src/components/icons/heart.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.53734 1.86268C6.39074 1.71601 6.21667 1.59965 6.02508 1.52027C5.8335 1.44088 5.62815 1.40002 5.42076 1.40002C5.21338 1.40002 5.00803 1.44088 4.81645 1.52027C4.62486 1.59965 4.45079 1.71601 4.30418 1.86268L3.99992 2.16694L3.69566 1.86268C3.39953 1.56655 2.99788 1.40018 2.57908 1.40018C2.16028 1.40018 1.75864 1.56655 1.4625 1.86268C1.16637 2.15882 1 2.56046 1 2.97926C1 3.39806 1.16637 3.7997 1.4625 4.09584L3.99992 6.63326L6.53734 4.09584C6.68402 3.94923 6.80037 3.77516 6.87976 3.58358C6.95914 3.39199 7 3.18664 7 2.97926C7 2.77188 6.95914 2.56653 6.87976 2.37494C6.80037 2.18336 6.68402 2.00929 6.53734 1.86268Z"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/hide.vue b/packages/x-components/src/components/icons/hide.vue
index 3835072813..17aa46c0c6 100644
--- a/packages/x-components/src/components/icons/hide.vue
+++ b/packages/x-components/src/components/icons/hide.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.62 5.62001C5.1538 5.97537 4.58612 6.17224 4 6.18182C2.09091 6.18182 1 4.00001 1 4.00001C1.33924 3.36779 1.80976 2.81544 2.38 2.38M3.42728 1.88364C3.615 1.8397 3.8072 1.81773 4 1.81818C5.90909 1.81818 7 4 7 4C6.83445 4.30971 6.63702 4.60129 6.41091 4.87M4.57817 4.57818C4.3742 4.79707 4.06702 4.88718 3.77713 4.81314C3.48724 4.73911 3.26088 4.51275 3.18684 4.22286C3.11281 3.93297 3.20291 3.62578 3.42181 3.42181M1 1L7 7"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/history-tiny.vue b/packages/x-components/src/components/icons/history-tiny.vue
index e9fdb5405e..555c78d869 100644
--- a/packages/x-components/src/components/icons/history-tiny.vue
+++ b/packages/x-components/src/components/icons/history-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.80005 2.2202V3.55351H3.13336M2.35782 4.66459C2.65382 5.50473 3.46976 6.04785 4.35905 5.99667C5.24834 5.94549 5.99659 5.31234 6.19424 4.44379C6.39189 3.57523 5.9913 2.68065 5.21173 2.24969C4.43216 1.81874 3.46154 1.9553 2.83114 2.58463L1.93094 3.43051"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/history.vue b/packages/x-components/src/components/icons/history.vue
index 7d0aaaefd5..0685d40389 100644
--- a/packages/x-components/src/components/icons/history.vue
+++ b/packages/x-components/src/components/icons/history.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 1.59732V3.39732H2.8M1.75301 4.89731C2.15261 6.03153 3.25416 6.76475 4.45472 6.69565C5.65528 6.62656 6.66544 5.77179 6.93227 4.59922C7.19911 3.42665 6.6583 2.21894 5.60586 1.63714C4.55341 1.05534 3.24305 1.2397 2.39201 2.08931L1.17671 3.23127"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/light-bulb-off.vue b/packages/x-components/src/components/icons/light-bulb-off.vue
index d24981e143..c4ddf11fd8 100644
--- a/packages/x-components/src/components/icons/light-bulb-off.vue
+++ b/packages/x-components/src/components/icons/light-bulb-off.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.99653 4.94354V6.06854M3.23901 6.10004C3.23901 6.51425 3.59654 6.80508 4.01076 6.80508C4.42497 6.80508 4.7825 6.51425 4.7825 6.10004M4.24666 4.81836C4.24666 4.95643 4.13473 5.06836 3.99666 5.06836C3.85858 5.06836 3.74666 4.95643 3.74666 4.81836C3.74666 4.68029 3.85858 4.56836 3.99666 4.56836C4.13473 4.56836 4.24666 4.68029 4.24666 4.81836Z"
       stroke="currentColor"
@@ -19,7 +14,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/light-bulb-on.vue b/packages/x-components/src/components/icons/light-bulb-on.vue
index 84d778a0e1..4cfddb82f3 100644
--- a/packages/x-components/src/components/icons/light-bulb-on.vue
+++ b/packages/x-components/src/components/icons/light-bulb-on.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.99666 5.50677V6.63177M3.23914 6.66327C3.23914 7.07748 3.59667 7.36832 4.01088 7.36832C4.42509 7.36832 4.78262 7.07748 4.78262 6.66327M4.24678 5.38159C4.24678 5.51966 4.13485 5.63159 3.99678 5.63159C3.85871 5.63159 3.74678 5.51966 3.74678 5.38159C3.74678 5.24352 3.85871 5.13159 3.99678 5.13159C4.13485 5.13159 4.24678 5.24352 4.24678 5.38159Z"
       stroke="currentColor"
@@ -25,7 +20,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/menu.vue b/packages/x-components/src/components/icons/menu.vue
index 84732d2507..eb139dfd55 100644
--- a/packages/x-components/src/components/icons/menu.vue
+++ b/packages/x-components/src/components/icons/menu.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 3.97682H7M1 1.8999H7M1 6.05374H7"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/minus-tiny.vue b/packages/x-components/src/components/icons/minus-tiny.vue
index efe365a283..5dd00da03d 100644
--- a/packages/x-components/src/components/icons/minus-tiny.vue
+++ b/packages/x-components/src/components/icons/minus-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 4H6"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/minus.vue b/packages/x-components/src/components/icons/minus.vue
index 36e33506ee..42e7988077 100644
--- a/packages/x-components/src/components/icons/minus.vue
+++ b/packages/x-components/src/components/icons/minus.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 4H7"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/plus-tiny.vue b/packages/x-components/src/components/icons/plus-tiny.vue
index 0da37517e6..b789069798 100644
--- a/packages/x-components/src/components/icons/plus-tiny.vue
+++ b/packages/x-components/src/components/icons/plus-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4.00004 2V6M2 4.00004H6"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/plus.vue b/packages/x-components/src/components/icons/plus.vue
index b649478df5..40cd1293ee 100644
--- a/packages/x-components/src/components/icons/plus.vue
+++ b/packages/x-components/src/components/icons/plus.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 1.5V6.5M1.5 4H6.5"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/radiobutton-selected.vue b/packages/x-components/src/components/icons/radiobutton-selected.vue
index 8dabbe4b15..ae9d35fad1 100644
--- a/packages/x-components/src/components/icons/radiobutton-selected.vue
+++ b/packages/x-components/src/components/icons/radiobutton-selected.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_269)">
       <circle cx="4" cy="4" r="3" stroke="currentColor" stroke-width="0.4" />
       <circle cx="4.00005" cy="4.00005" r="2.2" fill="currentColor" />
@@ -16,7 +11,3 @@
     </defs>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/radiobutton-unselected.vue b/packages/x-components/src/components/icons/radiobutton-unselected.vue
index b1886d10ba..90b36b4dba 100644
--- a/packages/x-components/src/components/icons/radiobutton-unselected.vue
+++ b/packages/x-components/src/components/icons/radiobutton-unselected.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_235)">
       <circle cx="4" cy="4" r="3" stroke="currentColor" stroke-width="0.4" />
     </g>
@@ -15,7 +10,3 @@
     </defs>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/search-tiny.vue b/packages/x-components/src/components/icons/search-tiny.vue
index 13e471993f..118d79c265 100644
--- a/packages/x-components/src/components/icons/search-tiny.vue
+++ b/packages/x-components/src/components/icons/search-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.26263 6L5.07213 4.9164M5.45901 3.72909C5.45901 4.68405 4.68469 5.45819 3.72951 5.45819C2.77433 5.45819 2 4.68405 2 3.72909C2 2.77414 2.77433 2 3.72951 2C4.68469 2 5.45901 2.77414 5.45901 3.72909Z"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/search.vue b/packages/x-components/src/components/icons/search.vue
index a099f61885..84f0755c8e 100644
--- a/packages/x-components/src/components/icons/search.vue
+++ b/packages/x-components/src/components/icons/search.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7.04471 6.85704L5.34409 5.30913M5.89674 3.61307C5.89674 4.97721 4.79062 6.08307 3.42615 6.08307C2.06169 6.08307 0.955566 4.97721 0.955566 3.61307C0.955566 2.24892 2.06169 1.14307 3.42615 1.14307C4.79062 1.14307 5.89674 2.24892 5.89674 3.61307Z"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/settings.vue b/packages/x-components/src/components/icons/settings.vue
index 99e7255215..621d5de4f2 100644
--- a/packages/x-components/src/components/icons/settings.vue
+++ b/packages/x-components/src/components/icons/settings.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_178)">
       <path
         d="M4 4.81818C4.45187 4.81818 4.81818 4.45187 4.81818 4C4.81818 3.54813 4.45187 3.18182 4 3.18182C3.54813 3.18182 3.18182 3.54813 3.18182 4C3.18182 4.45187 3.54813 4.81818 4 4.81818Z"
@@ -28,7 +23,3 @@
     </defs>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/show.vue b/packages/x-components/src/components/icons/show.vue
index 642a445ff5..c0ceb4cd50 100644
--- a/packages/x-components/src/components/icons/show.vue
+++ b/packages/x-components/src/components/icons/show.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -23,7 +18,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/sort-az.vue b/packages/x-components/src/components/icons/sort-az.vue
index a8e779af4f..3edc850c67 100644
--- a/packages/x-components/src/components/icons/sort-az.vue
+++ b/packages/x-components/src/components/icons/sort-az.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.44971 4.58789L2.72929 4.59065L1.44971 6.39663H2.68392"
       stroke="currentColor"
@@ -36,7 +31,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/sort-price-down.vue b/packages/x-components/src/components/icons/sort-price-down.vue
index 7a8560e5c8..95ce17f39d 100644
--- a/packages/x-components/src/components/icons/sort-price-down.vue
+++ b/packages/x-components/src/components/icons/sort-price-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4.729 4.87842L5.8543 5.99999L6.99995 4.87842"
       stroke="currentColor"
@@ -42,7 +37,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/sort-price-up.vue b/packages/x-components/src/components/icons/sort-price-up.vue
index d5ab8583d2..62434cfb27 100644
--- a/packages/x-components/src/components/icons/sort-price-up.vue
+++ b/packages/x-components/src/components/icons/sort-price-up.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 3.12158L5.87471 2.00001L4.72905 3.12158"
       stroke="currentColor"
@@ -42,7 +37,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/sort-relevancy.vue b/packages/x-components/src/components/icons/sort-relevancy.vue
index 6a03eefae7..1d1daa4675 100644
--- a/packages/x-components/src/components/icons/sort-relevancy.vue
+++ b/packages/x-components/src/components/icons/sort-relevancy.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 3.35614H3.4M1 2.15063H4.2M1 4.56165H2.6239M1 5.76715H1.97434"
       stroke="currentColor"
@@ -28,7 +23,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/sort-za.vue b/packages/x-components/src/components/icons/sort-za.vue
index 7f956fb373..77e1742148 100644
--- a/packages/x-components/src/components/icons/sort-za.vue
+++ b/packages/x-components/src/components/icons/sort-za.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.44971 4.58789L2.72929 4.59065L1.44971 6.39663H2.68392"
       stroke="currentColor"
@@ -36,7 +31,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/star-filled.vue b/packages/x-components/src/components/icons/star-filled.vue
index f468395a8d..6eec02c74a 100644
--- a/packages/x-components/src/components/icons/star-filled.vue
+++ b/packages/x-components/src/components/icons/star-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_159)">
       <path
         fill-rule="evenodd"
@@ -24,7 +19,3 @@
     </defs>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/star.vue b/packages/x-components/src/components/icons/star.vue
index 91f38b6c0b..364bd4ceda 100644
--- a/packages/x-components/src/components/icons/star.vue
+++ b/packages/x-components/src/components/icons/star.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -16,7 +11,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/tag-filled.vue b/packages/x-components/src/components/icons/tag-filled.vue
index 9392f7843f..bec620f4ec 100644
--- a/packages/x-components/src/components/icons/tag-filled.vue
+++ b/packages/x-components/src/components/icons/tag-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.92159 6.49265L1.56456 4.13563L3.92159 1.77861H6.27861V4.13563L3.92159 6.49265Z"
       fill="currentColor"
@@ -22,7 +17,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/tag.vue b/packages/x-components/src/components/icons/tag.vue
index e39952e542..a6a5a9b5cf 100644
--- a/packages/x-components/src/components/icons/tag.vue
+++ b/packages/x-components/src/components/icons/tag.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.92159 6.49265L1.56456 4.13563L3.92159 1.77861H6.27861V4.13563L3.92159 6.49265Z"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/trash-open.vue b/packages/x-components/src/components/icons/trash-open.vue
index 8eeeb2d04c..d2247e5d60 100644
--- a/packages/x-components/src/components/icons/trash-open.vue
+++ b/packages/x-components/src/components/icons/trash-open.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.94455 2.69995V7.0999H2.05569L2.05566 2.69995"
       stroke="currentColor"
@@ -42,7 +37,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/trash.vue b/packages/x-components/src/components/icons/trash.vue
index 7580a59f39..46ce2f2e2f 100644
--- a/packages/x-components/src/components/icons/trash.vue
+++ b/packages/x-components/src/components/icons/trash.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.94461 2.19995V6.99995H2.05575L2.05572 2.19995"
       stroke="currentColor"
@@ -42,7 +37,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/trending-tiny.vue b/packages/x-components/src/components/icons/trending-tiny.vue
index a0b94e1db3..fe9620ac25 100644
--- a/packages/x-components/src/components/icons/trending-tiny.vue
+++ b/packages/x-components/src/components/icons/trending-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.75317 3.21997L4.18008 4.6167L3.30805 3.85012L2 4.99999"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/trending.vue b/packages/x-components/src/components/icons/trending.vue
index 357ab56622..5abeee5fff 100644
--- a/packages/x-components/src/components/icons/trending.vue
+++ b/packages/x-components/src/components/icons/trending.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.85229 2.34766C5.84048 3.42973 5.4209 3.88871 4.40909 4.97078L3.04545 3.51245L1 5.69995"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/user-filled.vue b/packages/x-components/src/components/icons/user-filled.vue
index 27d03757e2..9f254c719d 100644
--- a/packages/x-components/src/components/icons/user-filled.vue
+++ b/packages/x-components/src/components/icons/user-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5Z"
       fill="currentColor"
@@ -18,7 +13,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/user.vue b/packages/x-components/src/components/icons/user.vue
index 1bf84cd2b9..3cbe10fde9 100644
--- a/packages/x-components/src/components/icons/user.vue
+++ b/packages/x-components/src/components/icons/user.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5V2.5Z"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>