Extracted reset button as a separate component for reusability

docs/.vitepress/theme/components/base/ResetButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { rotateCw } from '../../../data/iconNodes'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import IconButton from "./IconButton.vue";
+
+const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
+</script>
+
+<template>
+  <IconButton class="reset-button">
+    <RotateIcon :size="20"/>
+  </IconButton>
+</template>
+
+<style scoped>
+.reset-button {
+  background: none;
+  padding: 0;
+}
+
+.reset-button .lucide {
+  transition: ease-in-out 0.1s transform;
+}
+
+.reset-button:hover {
+  background: none;
+  border-color: transparent;
+}
+
+/* a rotate css animation keyframes */
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.reset-button:active .lucide {
+  transform: rotate(45deg);
+}
+</style>

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { syncRef, useCssVar } from '@vueuse/core'
 import HomeContainer from './HomeContainer.vue'
-import { rotateCw } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
 import RangeSlider from '../base/RangeSlider.vue'
 import InputField from '../base/InputField.vue'
 import ColorPicker from '../base/ColorPicker.vue'
-import IconButton from '../base/IconButton.vue'
+import ResetButton from '../base/ResetButton.vue'
 import HomeIconCustomizerIcons from './HomeIconCustomizerIcons.vue'
 
 import { ref } from 'vue'
@@ -44,8 +42,6 @@ syncRef(color, colorCssVar)
 syncRef(strokeWidth, strokeWidthCssVar)
 syncRef(size, sizeCssVar)
 
-const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
-
 function resetStyle () {
   color.value = 'currentColor'
   strokeWidth.value = 2
@@ -60,9 +56,7 @@ function resetStyle () {
       <div class="card-column">
         <h2 class="title">
           Style as you please
-          <IconButton class="reset-button" @click="resetStyle">
-            <RotateIcon :size="20"/>
-          </IconButton>
+          <ResetButton @click="resetStyle"></ResetButton>
         </h2>
         <p class="copy">
           Lucide has a lot of customization options to match the icons with you UI.
@@ -141,6 +135,7 @@ function resetStyle () {
   flex-direction: row;
   gap: 8px;
   justify-content: space-between;
+  align-items: center;
 }
 
 .copy {

docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue

@@ -3,11 +3,9 @@ import { shallowRef, type Ref } from 'vue'
 import { useCssVar, syncRef } from '@vueuse/core'
 import { useIconStyleContext } from '../../composables/useIconStyle'
 import RangeSlider from '../base/RangeSlider.vue'
-import IconButton from '../base/IconButton.vue'
 import InputField from '../base/InputField.vue'
 import ColorPicker from '../base/ColorPicker.vue'
-import { rotateCw } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import ResetButton from '../base/ResetButton.vue'
 
 const props = defineProps<{
   rootEl?: Ref<HTMLElement>
@@ -44,8 +42,6 @@ syncRef(color, colorCssVar)
 syncRef(strokeWidth, strokeWidthCssVar)
 syncRef(size, sizeCssVar)
 
-const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
-
 function resetStyle () {
   color.value = 'currentColor'
   strokeWidth.value = 2
@@ -59,9 +55,7 @@ function resetStyle () {
       <h2 class="card-title">
         Customizer
       </h2>
-      <IconButton class="reset-button" @click="resetStyle">
-        <RotateIcon :size="20"/>
-      </IconButton>
+      <ResetButton @click="resetStyle"></ResetButton>
     </div>
     <InputField
       id="icon-color"
@@ -136,30 +130,4 @@ function resetStyle () {
   margin-left: auto;
 }
 
-.reset-button {
-  background: none;
-  padding: 0;
-  transition: ease-in-out 0.1s transform;
-}
-
-.reset-button:hover {
-  background: none;
-  border-color: transparent;
-}
-
-/* a rotate css animation keyframes */
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(359deg);
-  }
-}
-
-.reset-button:active {
-  transform: rotate(45deg);
-}
-
-
 </style>