diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 40f1070722..e69c232e63 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.45](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.44...vue3-migration-test@1.0.0-alpha.45) (2024-07-09)
+
+
+### Features
+
+* migrate experience controls (#1530) ([91ee6d0](https://github.com/empathyco/x/commit/91ee6d0f171b870c42e6dcc95229a6be66b7067e))
+
+
+
+## [1.0.0-alpha.44](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.43...vue3-migration-test@1.0.0-alpha.44) (2024-07-09)
+
+
+### Bug Fixes
+
+* **main-scroll:** obtain observed container element reliably to work with any Vue version (#1552) ([0b4e415](https://github.com/empathyco/x/commit/0b4e41504409dd35a3da0fcf35fa471ea8350f6f))
+
+
+
+## [1.0.0-alpha.43](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.42...vue3-migration-test@1.0.0-alpha.43) (2024-07-08)
+
+
+### Features
+
+* migrate filters components to Composition API (#1550) ([dd6a2d7](https://github.com/empathyco/x/commit/dd6a2d728632e81c25cc918c1cac1aa10daab590))
+
+
+
 ## [1.0.0-alpha.42](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.41...vue3-migration-test@1.0.0-alpha.42) (2024-07-08)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index a331aa113a..72a043400c 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.42",
+  "version": "1.0.0-alpha.45",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
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 6fff4ac5e2..1722fbb29c 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -18,3 +18,4 @@ 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 TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
+export { default as TestIcons } from './icons/test-icons.vue';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index e23a9f174f..3ba06cd5e2 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -73,7 +73,25 @@ const adapter = {
   identifierResults: () =>
     new Promise(resolve =>
       resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
-    )
+    ),
+  experienceControls: () => {
+    return new Promise(resolve =>
+      resolve({
+        controls: {
+          semanticQueries: {
+            numberOfCarousels: 2,
+            resultsPerCarousels: 2
+          }
+        },
+        events: {
+          SemanticQueriesConfigProvided: {
+            maxItemsToRequest: 'controls.semanticQueries.numberOfCarousels',
+            resultsPerCarousel: 'controls.semanticQueries.resultsPerCarousels'
+          }
+        }
+      })
+    );
+  }
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 04822cfc66..c8a2c45f80 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -45,9 +45,11 @@ import {
   TestRedirection,
   TestExtraParams,
   TestSearch,
+  TestExperienceControls,
   TestTagging,
   TestRenderlessExtraParam,
-  TestAnimationFactory
+  TestAnimationFactory,
+  TestIcons
 } from './';
 
 const routes = [
@@ -276,6 +278,11 @@ const routes = [
     name: 'SnippetConfigExtraparams',
     component: TestExtraParams
   },
+  {
+    path: '/experience-controls',
+    name: 'ExperienceControls',
+    component: TestExperienceControls
+  },
   {
     path: '/tagging',
     name: 'Tagging',
@@ -290,6 +297,11 @@ const routes = [
     path: '/animation-factory',
     name: 'AnimationFactory',
     component: TestAnimationFactory
+  },
+  {
+    path: '/icons',
+    name: 'Icons',
+    component: TestIcons
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/experience-controls/components/index.ts b/packages/_vue3-migration-test/src/x-modules/experience-controls/components/index.ts
new file mode 100644
index 0000000000..39cdeaf8d9
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/experience-controls/components/index.ts
@@ -0,0 +1 @@
+export { default as TestExperienceControls } from './test-experience-controls.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/experience-controls/components/test-experience-controls.vue b/packages/_vue3-migration-test/src/x-modules/experience-controls/components/test-experience-controls.vue
new file mode 100644
index 0000000000..59afdadbd7
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/experience-controls/components/test-experience-controls.vue
@@ -0,0 +1,27 @@
+<template>
+  <span style="display: block">
+    Controls:
+    <b>{{ controls }}</b>
+  </span>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  <ExperienceControls />
+  SemanticQueriesConfigProvided with {{ message }}
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import ExperienceControls from '../../../../../x-components/src/x-modules/experience-controls/components/experience-controls.vue';
+  import { useState } from '../../../../../x-components/src/composables/use-state';
+  import { useXBus } from '../../../../../x-components/src/composables/use-x-bus';
+  import SnippetConfigExtraParams from '../../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { XEvent } from '../../../../../x-components/src/wiring/events.types';
+
+  const xBus = useXBus();
+  const message = ref('');
+
+  xBus
+    .on('SemanticQueriesConfigProvided' as XEvent, true)
+    .subscribe(event => (message.value = event.eventPayload as string));
+
+  const { controls } = useState('experienceControls', ['controls']);
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/experience-controls/index.ts b/packages/_vue3-migration-test/src/x-modules/experience-controls/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/experience-controls/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index c935daf10c..2681f15684 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -12,3 +12,4 @@ export * from './semantic-queries';
 export * from './recommendations';
 export * from './popular-searches';
 export * from './identifier-results';
+export * from './experience-controls';
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
index 8f74707be1..b74c6c5d96 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
-  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
-  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
-  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
-</script>
-
 <template>
+  <MainScroll class="CUSTOM-CLASS" data-custom="CUSTOM-DATA-ATTR">
+    <ul class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
   <MainScroll>
     <ul class="list" data-test="scroll">
       <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
@@ -14,6 +15,27 @@
   </MainScroll>
 </template>
 
+<script setup lang="ts">
+  import { useXBus } from '../../../../x-components/src/composables/use-x-bus';
+  import { XEvent } from '../../../../x-components/src/wiring/events.types';
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+
+  const xBus = useXBus();
+
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+  const events: XEvent[] = [
+    'UserScrolledToElement',
+    'ScrollRestoreSucceeded',
+    'ScrollRestoreFailed'
+  ];
+
+  events.forEach(event => {
+    // eslint-disable-next-line no-console
+    xBus.on(event, true).subscribe(args => console.log(`${event} event ->`, args));
+  });
+</script>
+
 <style scoped lang="scss">
   .list {
     overflow: auto;
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
index 8ecf56eab0..e4a03d984e 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
@@ -4,7 +4,7 @@ import { ScrollXModule } from '../../../../x-components/src/x-modules/scroll/x-m
 export const scrollXModule: PrivateXModuleOptions<ScrollXModule> = {
   storeModule: {
     state: {
-      pendingScrollTo: 'item-10'
+      pendingScrollTo: 'item-15'
     }
   }
 };
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 2fe8bc90aa..ba63b06684 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.65](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.64...@empathyco/x-components@5.0.0-alpha.65) (2024-07-09)
+
+
+### Features
+
+* migrate experience controls (#1530) ([91ee6d0](https://github.com/empathyco/x/commit/91ee6d0f171b870c42e6dcc95229a6be66b7067e))
+
+
+
+## [5.0.0-alpha.64](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.63...@empathyco/x-components@5.0.0-alpha.64) (2024-07-09)
+
+
+### Bug Fixes
+
+* **main-scroll:** obtain observed container element reliably to work with any Vue version (#1552) ([0b4e415](https://github.com/empathyco/x/commit/0b4e41504409dd35a3da0fcf35fa471ea8350f6f))
+
+
+
+## [5.0.0-alpha.63](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.62...@empathyco/x-components@5.0.0-alpha.63) (2024-07-08)
+
+
+### Features
+
+* migrate filters components to Composition API (#1550) ([dd6a2d7](https://github.com/empathyco/x/commit/dd6a2d728632e81c25cc918c1cac1aa10daab590))
+
+
+
 ## [5.0.0-alpha.62](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.61...@empathyco/x-components@5.0.0-alpha.62) (2024-07-08)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index e76c47fccf..19e89dca81 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.62",
+  "version": "5.0.0-alpha.65",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
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>
diff --git a/packages/x-components/src/components/no-element.ts b/packages/x-components/src/components/no-element.ts
index ea90699032..daaf905801 100644
--- a/packages/x-components/src/components/no-element.ts
+++ b/packages/x-components/src/components/no-element.ts
@@ -8,7 +8,8 @@ import { useNoElementRender } from '../composables/use-no-element-render';
  * @internal
  */
 export const NoElement = defineComponent({
-  setup(props, { slots }) {
+  name: 'NoElement',
+  setup(_, { slots }) {
     return () => useNoElementRender(slots);
   }
 });
diff --git a/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue b/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue
index 952916008f..932d9e76c8 100644
--- a/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue
+++ b/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { XOn } from '../../../components/decorators/bus.decorators';
+  import { defineComponent } from 'vue';
   import { XEvent, XEventsTypes } from '../../../wiring/events.types';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { experienceControlsXModule } from '../x-module';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * This component subscribes to changes in the ExperienceControls module to fire the events that
@@ -12,25 +10,29 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(experienceControlsXModule)]
-  })
-  export default class ExperienceControls extends Vue {
-    /**.
-     * Iterates the list of XEvents received and emits them
-     *
-     * @param events - events to be emitted
-     */
-    @XOn('ExperienceControlsEventsChanged')
-    onEventsChanged(events: Partial<XEventsTypes>): void {
-      Object.entries(events).forEach(([eventName, eventPayload]) => {
-        this.$x.emit(eventName as XEvent, eventPayload);
-      });
-    }
+  export default defineComponent({
+    name: 'ExperienceControls',
+    xModule: experienceControlsXModule.name,
+    setup() {
+      const xBus = useXBus();
+
+      /**
+       * Iterates the list of XEvents received and emits them.
+       *
+       * @param events - Events to be emitted.
+       */
+      function onEventsChanged(events: Partial<XEventsTypes>): void {
+        Object.entries(events).forEach(([eventName, eventPayload]) => {
+          xBus.emit(eventName as XEvent, eventPayload);
+        });
+      }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      xBus.on('ExperienceControlsEventsChanged', false).subscribe(event => onEventsChanged(event));
+
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/experience-controls/x-module.ts b/packages/x-components/src/x-modules/experience-controls/x-module.ts
index 6a75f46eb1..0080f90ba5 100644
--- a/packages/x-components/src/x-modules/experience-controls/x-module.ts
+++ b/packages/x-components/src/x-modules/experience-controls/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { experienceControlsEmitters } from './store/emitters';
 import { experienceControlsXStoreModule } from './store/module';
 import { ExperienceControlsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const experienceControlsXModule: ExperienceControlsXModule = {
   storeEmitters: experienceControlsEmitters,
   wiring: experienceControlsWiring
 };
+
+XPlugin.registerXModule(experienceControlsXModule);
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index cfdf65655e..358086ac59 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -33,67 +33,35 @@
     name: 'MainScrollItem',
     xModule: scrollXModule.name,
     props: {
-      /**
-       * The item data. Used to set the scroll identifier.
-       *
-       * @public
-       */
+      /** The item data. Used to set the scroll identifier. */
       item: {
         type: Object as PropType<Identifiable>,
         required: true
       },
-      /**
-       * The tag to render.
-       *
-       * @public
-       */
+      /** The tag to render. */
       tag: {
         type: [String, Object] as PropType<string | typeof Vue>,
         default: 'div'
       }
     },
     setup(props) {
-      type ElementRef = {
-        $el: HTMLElement;
-      };
-
       const xBus = useXBus();
 
-      /**
-       * Rendered HTML node.
-       *
-       * @public
-       */
-      const rootRef = ref<ElementRef | HTMLElement | null>(null);
+      /** Rendered HTML node. */
+      const rootRef = ref<HTMLElement>();
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
        * `id` property, this component should be scrolled into view.
-       *
-       * @internal
        */
       const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
 
-      /**
-       * Observer to detect the first visible element.
-       *
-       * @internal
-       */
+      /** Observer to detect the first visible element. */
       const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(
         ScrollObserverKey as string,
         null
       );
-      /**
-       * Checks if a given value is an `ElementRef` object.
-       *
-       * @param value - The value to check.
-       * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
-       *
-       * @internal
-       */
-      const isElementRef = (value: any): value is ElementRef => {
-        return value && value.$el instanceof HTMLElement;
-      };
+
       /**
        * Initialises the element visibility observation, stopping the previous one if it has.
        *
@@ -105,14 +73,12 @@
         oldObserver: ScrollVisibilityObserver | null
       ): void => {
         {
-          if (rootRef.value !== null) {
-            const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
-
-            oldObserver?.unobserve(htmlElement);
-            newObserver?.observe(htmlElement);
+          if (rootRef.value) {
+            oldObserver?.unobserve(rootRef.value);
+            newObserver?.observe(rootRef.value);
             if (pendingScrollTo.value === props.item.id) {
               Vue.nextTick(() => {
-                htmlElement.scrollIntoView({
+                rootRef.value!.scrollIntoView({
                   block: 'center'
                 });
               });
@@ -122,15 +88,10 @@
         }
       };
 
-      /**
-       * Detaches the observer from the rendered element to prevent memory leaks.
-       *
-       * @internal
-       */
+      /** Detaches the observer from the rendered element to prevent memory leaks. */
       onBeforeUnmount(() => {
-        if (rootRef.value !== null) {
-          const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
-          firstVisibleItemObserver?.value.unobserve(htmlElement);
+        if (rootRef.value) {
+          firstVisibleItemObserver?.value.unobserve(rootRef.value);
         }
       });
 
@@ -139,8 +100,6 @@
        * - Observes the rendered element to detect if it is the first visible item.
        * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
        * element into the first position of the view.
-       *
-       * @internal
        */
       onMounted(() => {
         nextTick(() => {
@@ -151,7 +110,7 @@
         });
       });
 
-      return { rootRef, firstVisibleItemObserver, observeItem, isElementRef };
+      return { rootRef };
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 9c03c9f35c..07151b1935 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -1,16 +1,19 @@
-<template>
-  <NoElement ref="rootRef" :class="dynamicClasses">
-    <slot />
-  </NoElement>
-</template>
 <script lang="ts">
-  import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
-  import { VueCSSClasses } from '../../../utils/types';
+  import {
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    h,
+    onBeforeUnmount,
+    onMounted,
+    provide,
+    ref,
+    watch
+  } from 'vue';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
   import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
-  import { NoElement } from '../../../components/no-element';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
 
@@ -26,14 +29,11 @@
   export default defineComponent({
     name: 'MainScroll',
     xModule: scrollXModule.name,
-    components: { NoElement },
     props: {
       /**
        * If `true`, sets this scroll instance to the main of the application. Being the main
        * scroll implies that features like restoring the scroll when the query changes, or storing
        * the scroll position in the URL will be enabled for this container.
-       *
-       * @public
        */
       useWindow: {
         type: Boolean,
@@ -42,70 +42,40 @@
       /**
        * Timeout in milliseconds to abort trying to restore the scroll position to the target
        * element.
-       *
-       * @public
        */
       restoreScrollTimeoutMs: {
         type: Number,
         default: 5000
       },
-      /**
-       * Intersection percentage to consider an element visible.
-       *
-       * @public
-       */
+      /** Intersection percentage to consider an element visible. */
       threshold: {
         type: Number,
         default: 0.3
       },
-      /**
-       * Adjusts the size of the scroll container bounds.
-       *
-       * @public
-       */
+      /** Adjusts the size of the scroll container bounds. */
       margin: {
         type: String,
         default: '0px'
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const xBus = useXBus();
 
-      /**
-       * The elements that are currently considered visible.
-       *
-       * @internal
-       */
+      /** The reference to the root element of the component. */
+      const rootRef = ref<Element>();
+      /** The elements that are currently considered visible. */
       const intersectingElements = ref<HTMLElement[]>([]);
-      /**
-       * The reference to the root element of the component.
-       *
-       * @internal
-       */
-      const rootRef = ref<typeof NoElement | null>(null);
 
-      /**
-       * Intersection observer to determine visibility of the elements.
-       *
-       * @returns An intersection observer to detect elements visibility.
-       * @internal
-       */
+      /** Intersection observer to determine visibility of the elements. */
       let intersectionObserver = ref<IntersectionObserver | null>(null);
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
        * `id` property, this component should be scrolled into view.
-       *
-       * @internal
        */
       const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
 
-      /**
-       * Disables the animations.
-       *
-       * @returns A boolean to disable the animations.
-       * @internal
-       */
+      /** Disables the animations. */
       const disableAnimations = computed((): boolean => !!pendingScrollTo.value);
       provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations);
 
@@ -113,9 +83,8 @@
        * Removes an element from the {@link MainScroll.intersectingElements} list.
        *
        * @param element - The element to remove from the visible elements.
-       * @internal
        */
-      const removeVisibleElement = (element: HTMLElement): void => {
+      const removeVisibleElement = (element: HTMLElement) => {
         const index = intersectingElements.value.indexOf(element);
         if (index !== -1) {
           intersectingElements.value.splice(index, 1);
@@ -127,7 +96,6 @@
        * component should register themselves if they want to be observed.
        *
        * @returns The intersection observer.
-       * @public
        */
       const visibleElementsObserver = computed((): ScrollVisibilityObserver | null => {
         const observer = intersectionObserver.value;
@@ -147,9 +115,8 @@
        * Updates the visible elements given a list of intersection observer entries.
        *
        * @param entries - The entries from whom update the visibility.
-       * @internal
        */
-      const updateVisibleElements = (entries: IntersectionObserverEntry[]): void => {
+      const updateVisibleElements = (entries: IntersectionObserverEntry[]) => {
         entries.forEach(entry => {
           const target = entry.target as HTMLElement;
           if (entry.isIntersecting) {
@@ -160,55 +127,34 @@
         });
       };
 
-      /**
-       * Initialise the observer after mounting the component.
-       */
+      /** Stores the root element and initialise the observer after mounting the component. */
       onMounted(() => {
-        if (rootRef.value?.$el) {
+        rootRef.value = getCurrentInstance()?.proxy?.$el;
+        if (rootRef.value) {
           intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
-            root: props.useWindow ? document : rootRef.value.$el,
+            root: props.useWindow ? document : rootRef.value,
             threshold: props.threshold,
             rootMargin: props.margin
           });
         }
       });
 
-      /**
-       * Disconnects the intersection observer.
-       *
-       * @internal
-       */
+      /** Disconnects the intersection observer. */
       onBeforeUnmount(() => {
         intersectionObserver.value?.disconnect();
         xBus.emit('UserScrolledToElement', '');
       });
 
-      /**
-       * Disconnects the previous observer.
-       *
-       * @param _new - The new `IntersectionObserver`.
-       * @param old - The new `IntersectionObserver`.
-       * @internal
-       */
-      watch(
-        intersectionObserver,
-        (_new: IntersectionObserver | null, old: IntersectionObserver | null) => {
-          old?.disconnect();
-        }
-      );
+      /** Disconnects the previous observer. */
+      watch(intersectionObserver, (_new, old) => old?.disconnect());
 
-      /**
-       * Stores the identifier of the timeout that will consider the scroll failed to restore.
-       *
-       * @internal
-       */
+      /** Stores the identifier of the timeout that will consider the scroll failed to restore. */
       let restoreScrollFailTimeoutId: number;
 
       /**
        * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
        *
        * @param pendingScrollTo - The position the scroll should be restored to.
-       * @internal
        */
       watch(pendingScrollTo, () => {
         // TODO Move this logic to the wiring. A cancelable delay operator is needed
@@ -220,26 +166,12 @@
         }
       });
 
-      /**
-       * Adds the dynamic css classes to the component.
-       *
-       * @returns The class to be added to the component.
-       *
-       * @internal
-       */
-      const dynamicClasses = computed((): VueCSSClasses => {
-        return {
-          'x-main-scroll--no-transition': !!pendingScrollTo.value
-        };
-      });
-
       /**
        * The first visible element contained in this component.
        *
        * @returns The first visible element in this component.
-       * @internal
        */
-      const firstVisibleElement = computed((): string | '' => {
+      const firstVisibleElement = computed(() => {
         if (intersectingElements.value.length === 0) {
           return '';
         }
@@ -254,26 +186,24 @@
               : firstVisibleElement;
           }
         );
-        return firstVisibleElement ===
-          (rootRef.value?.$el as HTMLElement).querySelector('[data-scroll]')
+        return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')
           ? ''
           : firstVisibleElement.dataset.scroll!;
       });
+
       watch(
         firstVisibleElement,
-        () => {
-          xBus.emit('UserScrolledToElement', firstVisibleElement.value);
-        },
+        () => xBus.emit('UserScrolledToElement', firstVisibleElement.value),
         { immediate: true }
       );
 
-      return {
-        rootRef,
-        dynamicClasses,
-        firstVisibleElement,
-        visibleElementsObserver,
-        intersectingElements
-      };
+      /*
+       * Obtains the vNodes array of the default slot and renders only the first one.
+       * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2
+       * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
+       * retrieve the HTML element in both versions.
+       */
+      return () => slots.default?.()[0] ?? h();
     }
   });
 </script>