Style: Standardize icon use Part 1 (#5947)

## Summary

Remove the mix of class based and component style icons in favor of just
[classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage).

## Changes

- **What**: Migrate existing lucide icons

## Review Focus

What differs between the icons before and now?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -73,7 +73,7 @@ const theButtonStyle = computed(() =>
           {{ selectedItems.map((item) => (item as any)?.name).join(', ') }}
         </span>
       </span>
-      <i-lucide:chevron-down :class="chevronClass" />
+      <i class="icon-[lucide--chevron-down]" :class="chevronClass" />
     </button>
     <!-- Open File -->
     <label
@@ -86,7 +86,7 @@ const theButtonStyle = computed(() =>
         )
       "
     >
-      <i-lucide:folder-search class="size-4" />
+      <i class="icon-[lucide--folder-search] size-4" />
       <input
         type="file"
         class="opacity-0 absolute inset-0 -z-1"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -73,9 +73,9 @@ const searchQuery = defineModel<string>('searchQuery')
           v-if="items.length === 0"
           class="flex justify-center items-center absolute inset-0"
         >
-          <i-lucide:circle-off
+          <i
             title="No items"
-            class="size-30 text-zinc-500/20"
+            class="icon-[lucide--circle-off] size-30 text-zinc-500/20"
           />
         </div>
         <!-- Item -->

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -56,11 +56,11 @@ function handleSortSelected(item: SortOption) {
         )
       "
     >
-      <i-lucide:loader-circle
+      <i
         v-if="isQuerying"
-        class="mr-2 size-4 animate-spin"
+        class="icon-[lucide--loader-circle] mr-2 size-4 animate-spin"
       />
-      <i-lucide:search v-else class="mr-2 size-4" />
+      <i v-else class="icon-[lucide--search] mr-2 size-4" />
       <input
         v-model="searchQuery"
         type="text"
@@ -87,7 +87,7 @@ function handleSortSelected(item: SortOption) {
         v-if="sortSelected !== 'default'"
         class="size-2 absolute top-[-2px] left-[-2px] bg-blue-500 rounded-full"
       />
-      <i-lucide:arrow-up-down class="size-4" />
+      <i class="icon-[lucide--arrow-up-down] size-4" />
     </button>
     <!-- Sort Popover -->
     <Popover
@@ -127,7 +127,10 @@ function handleSortSelected(item: SortOption) {
           @click="handleSortSelected(item)"
         >
           <span>{{ item.name }}</span>
-          <i-lucide:check v-if="sortSelected === item.id" class="size-4" />
+          <i
+            v-if="sortSelected === item.id"
+            class="icon-[lucide--check] size-4"
+          />
         </button>
       </div>
     </Popover>
@@ -153,7 +156,7 @@ function handleSortSelected(item: SortOption) {
         "
         @click="layoutMode = 'list'"
       >
-        <i-lucide:list class="size-4" />
+        <i class="icon-[lucide--list] size-4" />
       </button>
       <button
         :class="
@@ -167,7 +170,7 @@ function handleSortSelected(item: SortOption) {
         "
         @click="layoutMode = 'grid'"
       >
-        <i-lucide:layout-grid class="size-4" />
+        <i class="icon-[lucide--layout-grid] size-4" />
       </button>
     </div>
   </div>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -93,7 +93,9 @@ function handleVideoLoad(event: Event) {
         v-if="selected"
         class="rounded-full bg-blue-500 border-1 border-white size-4 absolute top-1 left-1"
       >
-        <i-lucide:check class="size-3 text-white -translate-y-[0.5px]" />
+        <i
+          class="icon-[lucide--check] size-3 text-white -translate-y-[0.5px]"
+        />
       </div>
       <video
         v-if="mediaSrc && isVideo"