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

Co-authored-by: Benjamin Canac <[email protected]>
nuxt · Nov 6, 2024 · a6c1a6c · a6c1a6c
1 parent e3092b6
commit a6c1a6c
Show file tree

Hide file tree

Showing 177 changed files with 2,245 additions and 2,245 deletions.
diff --git a/devtools/app/app.vue b/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

diff --git a/devtools/app/components/CollapseContainer.vue b/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"

diff --git a/devtools/app/components/ComponentPreview.vue b/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)"
       />

diff --git a/devtools/app/components/inputs/ArrayInput.vue b/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

diff --git a/docs/app/app.vue b/docs/app/app.vue
@@ -23,27 +23,27 @@ const searchTerm = ref('')
 const links = computed(() => {
   return [{
     label: 'Docs',
-    icon: 'i-heroicons-book-open',
+    icon: 'i-lucide-book-open',
     to: '/getting-started',
     active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
   }, ...(navigation.value?.find(item => item.path === '/pro')
     ? [{
         label: 'Pro',
-        icon: 'i-heroicons-square-3-stack-3d',
+        icon: 'i-lucide-layers-3',
         to: '/pro',
         active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
       }, {
         label: 'Pricing',
-        icon: 'i-heroicons-credit-card',
+        icon: 'i-lucide-credit-card',
         to: '/pro/pricing'
       }, {
         label: 'Templates',
-        icon: 'i-heroicons-computer-desktop',
+        icon: 'i-lucide-monitor',
         to: '/pro/templates'
       }]
     : []), {
     label: 'Releases',
-    icon: 'i-heroicons-rocket-launch',
+    icon: 'i-lucide-rocket',
     to: '/releases'
   }].filter(Boolean)
 })

diff --git a/docs/app/components/Banner.vue b/docs/app/components/Banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <UBanner icon="i-heroicons-wrench-screwdriver" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" :close="false">
+  <UBanner icon="i-lucide-wrench" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-lucide-arrow-right' }]" :close="false">
     <template #title>
       You're looking at the documentation for <span class="font-semibold">Nuxt UI v3</span>!
     </template>

diff --git a/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue b/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue
@@ -2,15 +2,15 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile'
+    icon: 'i-lucide-smile'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch'
+    icon: 'i-lucide-swatch-book'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent'
+    icon: 'i-lucide-box'
   }
 ]
 </script>

diff --git a/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue b/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
@@ -2,15 +2,15 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile'
+    icon: 'i-lucide-smile'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch'
+    icon: 'i-lucide-swatch-book'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent'
+    icon: 'i-lucide-box'
   }
 ]
 </script>

diff --git a/docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue b/docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
@@ -2,18 +2,18 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile',
+    icon: 'i-lucide-smile',
     content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch',
+    icon: 'i-lucide-swatch-book',
     slot: 'colors',
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
   }
 ]

diff --git a/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue b/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
@@ -2,17 +2,17 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile',
+    icon: 'i-lucide-smile',
     content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch',
+    icon: 'i-lucide-swatch-book',
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
   }
 ]

diff --git a/docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue b/docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue
@@ -4,7 +4,7 @@ const items = [{
   to: '/'
 }, {
   slot: 'dropdown',
-  icon: 'i-heroicons-ellipsis-horizontal',
+  icon: 'i-lucide-ellipsis',
   children: [{
     label: 'Documentation'
   }, {

diff --git a/docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue b/docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 const items = [{
   label: 'Team',
-  icon: 'i-heroicons-users'
+  icon: 'i-lucide-users'
 }, {
   label: 'Invite users',
-  icon: 'i-heroicons-user-plus',
+  icon: 'i-lucide-user-plus',
   children: [{
     label: 'Invite by email',
-    icon: 'i-heroicons-paper-airplane'
+    icon: 'i-lucide-send-horizontal'
   }, {
     label: 'Invite by link',
-    icon: 'i-heroicons-link'
+    icon: 'i-lucide-link'
   }]
 }, {
   label: 'New team',
-  icon: 'i-heroicons-plus'
+  icon: 'i-lucide-plus'
 }]
 </script>
 
@@ -26,7 +26,7 @@ const items = [{
       <UButton
         color="neutral"
         variant="outline"
-        icon="i-heroicons-chevron-down-20-solid"
+        icon="i-lucide-chevron-down"
       />
     </UDropdownMenu>
   </UButtonGroup>

diff --git a/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue b/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue
@@ -6,7 +6,7 @@
       <UButton
         color="neutral"
         variant="subtle"
-        icon="i-heroicons-clipboard-document"
+        icon="i-lucide-clipboard"
       />
     </UTooltip>
   </UButtonGroup>

diff --git a/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
@@ -5,7 +5,7 @@
       label="Open"
       color="neutral"
       variant="subtle"
-      trailing-icon="i-heroicons-chevron-down-20-solid"
+      trailing-icon="i-lucide-chevron-down"
       :ui="{
         trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
       }"

diff --git a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
@@ -12,7 +12,7 @@ defineShortcuts({
       label="Open"
       color="neutral"
       variant="subtle"
-      trailing-icon="i-heroicons-chevron-down-20-solid"
+      trailing-icon="i-lucide-chevron-down"
       block
     />
 

diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
@@ -4,22 +4,22 @@ const groups = [{
   items: [
     {
       label: 'Profile',
-      icon: 'i-heroicons-user',
+      icon: 'i-lucide-user',
       kbds: ['meta', 'P']
     },
     {
       label: 'Billing',
-      icon: 'i-heroicons-credit-card',
+      icon: 'i-lucide-credit-card',
       kbds: ['meta', 'B'],
       slot: 'billing'
     },
     {
       label: 'Notifications',
-      icon: 'i-heroicons-bell'
+      icon: 'i-lucide-bell'
     },
     {
       label: 'Security',
-      icon: 'i-heroicons-lock-closed'
+      icon: 'i-lucide-lock'
     }
   ]
 }, {

diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
@@ -60,7 +60,7 @@ const users = [
       label="Search users..."
       color="neutral"
       variant="subtle"
-      icon="i-heroicons-magnifying-glass"
+      icon="i-lucide-search"
     />
 
     <template #content>

diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue
@@ -84,7 +84,7 @@ const groups = ref([
       {
         label: 'Add new file',
         suffix: 'Create a new file in the current directory or workspace.',
-        icon: 'i-heroicons-document-plus',
+        icon: 'i-lucide-file-plus',
         kbds: [
           'meta',
           'N'
@@ -96,7 +96,7 @@ const groups = ref([
       {
         label: 'Add new folder',
         suffix: 'Create a new folder in the current directory or workspace.',
-        icon: 'i-heroicons-folder-plus',
+        icon: 'i-lucide-folder-plus',
         kbds: [
           'meta',
           'F'
@@ -108,7 +108,7 @@ const groups = ref([
       {
         label: 'Add hashtag',
         suffix: 'Add a hashtag to the current item.',
-        icon: 'i-heroicons-hashtag',
+        icon: 'i-lucide-hash',
         kbds: [
           'meta',
           'H'
@@ -120,7 +120,7 @@ const groups = ref([
       {
         label: 'Add label',
         suffix: 'Add a label to the current item.',
-        icon: 'i-heroicons-tag',
+        icon: 'i-lucide-tag',
         kbds: [
           'meta',
           'L'

diff --git a/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue b/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
@@ -3,22 +3,22 @@ const items = [
   [
     {
       label: 'View',
-      icon: 'i-heroicons-eye'
+      icon: 'i-lucide-eye'
     },
     {
       label: 'Copy',
-      icon: 'i-heroicons-document-duplicate'
+      icon: 'i-lucide-copy'
     },
     {
       label: 'Edit',
-      icon: 'i-heroicons-pencil'
+      icon: 'i-lucide-pencil'
     }
   ],
   [
     {
       label: 'Delete',
       color: 'error' as const,
-      icon: 'i-heroicons-trash'
+      icon: 'i-lucide-trash'
     }
   ]
 ]

diff --git a/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue b/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
@@ -22,7 +22,7 @@ const items = [{
     </template>
 
     <template #refresh-trailing>
-      <UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
+      <UIcon v-if="loading" name="i-lucide-refresh-ccw" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
     </template>
   </UContextMenu>
 </template>