feat(theme)!: migrate from heroicons to lucide (#2540)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

devtools/app/app.vue

@@ -64,7 +64,7 @@ function onComponentLoaded() {
 const tabs = computed(() => {
   if (!component.value) return
   return [
-    { label: 'Props', slot: 'props', icon: 'i-heroicons-cog-6-tooth', disabled: !component.value.meta?.props?.length }
+    { label: 'Props', slot: 'props', icon: 'i-lucide-settings', disabled: !component.value.meta?.props?.length }
   ]
 })
 
@@ -93,7 +93,7 @@ const isDark = computed({
     <div v-if="status === 'pending' || error || !component || !components?.length">
       <div v-if="error" class="flex flex-col justify-center items-center h-screen w-screen text-center text-[var(--ui-color-error-500)]">
         <UILogo class="h-8" />
-        <UIcon name="i-heroicons-exclamation-circle" size="20" class="mt-2" />
+        <UIcon name="i-lucide-circle-alert" size="20" class="mt-2" />
         <p>
           {{ (error.data as any)?.error ?? 'Unexpected error' }}
         </p>
@@ -111,7 +111,7 @@ const isDark = computed({
           :items="components"
           placeholder="Search component..."
           class="top-0 translate-y-0 w-full mx-2"
-          icon="i-heroicons-magnifying-glass"
+          icon="i-lucide-search"
         />
 
         <div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-4 bg-[var(--ui-bg)]">
@@ -127,7 +127,7 @@ const isDark = computed({
             <ComponentPreview :component="component" :props="componentProps" class="h-full" />
             <div class="flex gap-2 absolute top-1 right-2">
               <UButton
-                :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
                 variant="ghost"
                 color="neutral"
                 @click="isDark = !isDark"
@@ -136,7 +136,7 @@ const isDark = computed({
                 v-if="component"
                 variant="ghost"
                 color="neutral"
-                icon="i-heroicons-arrow-top-right-on-square"
+                icon="i-lucide-external-link"
                 @click="openDocs()"
               >
                 Open docs

devtools/app/components/CollapseContainer.vue

@@ -32,7 +32,7 @@ onMounted(() => {
       class="bg-[var(--ui-bg)] group w-full flex justify-center my-1 border-t border-[var(--ui-border)] rounded-t-none"
       variant="link"
       color="neutral"
-      trailing-icon="i-heroicons-chevron-down"
+      trailing-icon="i-lucide-chevron-down"
       :data-state="collapsed ? 'closed' : 'open'"
       :ui="{ trailingIcon: 'transition group-data-[state=open]:rotate-180' }"
       @click="collapsed = !collapsed"

devtools/app/components/ComponentPreview.vue

@@ -118,7 +118,7 @@ const previewUrl = computed(() => {
       @load="onRendererReady"
     />
     <div v-if="!rendererVisible" class="grow w-full flex justify-center items-center px-8">
-      <UAlert color="error" variant="subtle" title="Component preview not found" icon="i-heroicons-exclamation-circle">
+      <UAlert color="error" variant="subtle" title="Component preview not found" icon="i-lucide-circle-alert">
         <template #description>
           <p>Ensure your <code>app.vue</code> file includes a <code>&lt;NuxtPage /&gt;</code> component, as the component preview is mounted as a page. </p>
         </template>
@@ -130,7 +130,7 @@ const previewUrl = computed(() => {
       <UButton
         color="neutral"
         variant="link"
-        :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
+        :icon="copied ? 'i-lucide-clipboard-check' : 'i-lucide-clipboard'"
         class="absolute top-6 right-6"
         @click="copy(formattedCode)"
       />

devtools/app/components/inputs/ArrayInput.vue

@@ -47,12 +47,12 @@ function addArrayItem() {
       />
 
       <UPopover>
-        <UButton variant="ghost" color="neutral" icon="i-heroicons-ellipsis-vertical" class="absolute top-4 right-1" />
+        <UButton variant="ghost" color="neutral" icon="i-lucide-ellipsis-vertical" class="absolute top-4 right-1" />
         <template #content>
           <UButton
             variant="ghost"
             color="error"
-            icon="i-heroicons-trash"
+            icon="i-lucide-trash"
             block
             @click="removeArrayItem(index)"
           >
@@ -63,7 +63,7 @@ function addArrayItem() {
     </div>
 
     <UButton
-      icon="i-heroicons-plus"
+      icon="i-lucide-plus"
       color="neutral"
       variant="ghost"
       block