move from heroicons to lucide icon

Author: HugoRCD

app/layouts/auth.vue

@@ -11,7 +11,7 @@ useHead({
     <div class="gradient" />
 
     <UButton
-      icon="i-heroicons-home"
+      icon="i-lucide-home"
       label="Home"
       to="/"
       color="neutral"

app/pages/login.vue

@@ -50,9 +50,9 @@ function onSubmit(data: any) {
       :providers="providers"
       title="Welcome back"
       align="top"
-      icon="i-heroicons-lock-closed"
+      icon="i-lucide-lock"
       :ui="{ base: 'text-center', footer: 'text-center' }"
-      :submit-button="{ trailingIcon: 'i-heroicons-arrow-right-20-solid' }"
+      :submit-button="{ trailingIcon: 'i-lucide-arrow-right' }"
       @submit="onSubmit"
     >
       <template #description>

content/0.index.yml

@@ -6,14 +6,14 @@ hero:
   description: This template demonstrates most of Nuxt UI Pro's components. It's a great starting point to build your own SaaS.
   headline:
     label: Made with Nuxt UI Pro
-    to: https://ui.nuxt.com/pro
+    to: https://ui3.nuxt.dev/getting-started
     icon: i-lucide-arrow-up-right
   links:
     - label: Get started
       to: '/signup'
       size: xl
       color: neutral
-      icon: i-heroicons-arrow-right-20-solid
+      icon: i-lucide-arrow-right
       trailing: true
     - label: Use this template
       icon: i-simple-icons-github
@@ -30,18 +30,18 @@ sections:
     features:
       - name: Easy to use
         description: Id laborum laboris duis nostrud excepteur ut velit.
-        icon: i-heroicons-cog
+        icon: i-lucide-cog
       - name: Reliable
         description: Magna Lorem ex cillum fugiat ad enim aute irure sit duis minim.
-        icon: i-heroicons-check
+        icon: i-lucide-check
       - name: Secure
         description: Proident nostrud excepteur sint ut culpa consectetur aute adipisicing.
-        icon: i-heroicons-lock-closed
+        icon: i-lucide-lock
     links:
       - label: Explore components
         to: /pro/components
         color: neutral
-        icon: i-heroicons-arrow-right-20-solid
+        icon: i-lucide-arrow-right
         trailing: true
         size: md
         class: ml-8
@@ -52,18 +52,18 @@ sections:
     features:
       - name: Fast
         description: Qui reprehenderit nostrud dolore nisi ad fugiat labore eiusmod.
-        icon: i-heroicons-rocket-launch
+        icon: i-lucide-rocket
       - name: Affordable
         description: Reprehenderit fugiat elit in do ipsum ut pariatur.
-        icon: i-heroicons-currency-dollar
+        icon: i-lucide-circle-dollar-sign
       - name: Scalable
         description: Lorem deserunt et eiusmod. Ea in consectetur minim officia.
-        icon: i-heroicons-chart-bar
+        icon: i-lucide-chart-bar
     links:
       - label: Learn more
         to: /pro/guide/content
         color: neutral
-        icon: i-heroicons-arrow-right-20-solid
+        icon: i-lucide-arrow-right
         trailing: true
         size: md
         class: ml-8
@@ -73,22 +73,22 @@ features:
   items:
     - title: Easy to use
       description: Id laborum laboris duis nostrud excepteur ut velit nulla magna Lorem proident non.
-      icon: i-heroicons-cog
+      icon: i-lucide-cog
     - title: Reliable
       description: Magna Lorem ex cillum fugiat ad enim aute irure sit duis minim.
-      icon: i-heroicons-check
+      icon: i-lucide-check
     - title: Secure
       description: Proident nostrud excepteur sint ut culpa consectetur aute adipisicing non anim ullamco.
-      icon: i-heroicons-lock-closed
+      icon: i-lucide-lock
     - title: Fast
       description: Qui reprehenderit nostrud dolore nisi ad fugiat labore eiusmod sint aliquip nisi voluptate.
-      icon: i-heroicons-rocket-launch
+      icon: i-lucide-rocket
     - title: Affordable
       description: Reprehenderit fugiat elit in do ipsum ut pariatur.
-      icon: i-heroicons-currency-dollar
+      icon: i-lucide-circle-dollar-sign
     - title: Scalable
       description: Lorem deserunt et eiusmod. Ea in consectetur minim officia ullamco enim deserunt est.
-      icon: i-heroicons-chart-bar
+      icon: i-lucide-chart-bar
 testimonials:
   headline: Testimonials
   title: What our customers are saying.
@@ -100,42 +100,36 @@ testimonials:
         description: CEO at Company
         avatar:
           src: https://i.pravatar.cc/120?img=1
-          loading: lazy
     - quote: Eiusmod dolor aute ut nulla pariatur officia consequat aute amet exercitation.
       user:
         name: Chace Rodgers
         description: CEO at Company
         avatar:
           src: https://i.pravatar.cc/120?img=7
-          loading: lazy
     - quote: Id duis velit enim officia ad nisi incididunt magna ex dolor minim deserunt dolor. Esse incididunt cillum nostrud esse do quis amet labore amet nulla eiusmod amet nulla Lorem. Incididunt ex voluptate irure officia laboris ea proident est qui.
       user:
         name: Cornelius Sheppard
         description: CEO at Company
         avatar:
           src: https://i.pravatar.cc/120?img=3
-          loading: lazy
     - quote: Velit consectetur in adipisicing culpa eiusmod commodo eu ex dolore. Officia irure nisi dolor dolore velit fugiat. Aliqua sint aliqua aute elit eu sunt.
       user:
         name: Destinee Woods
         description: CEO at Company
         avatar:
           src: https://i.pravatar.cc/120?img=5
-          loading: lazy
     - quote: Proident quis deserunt qui ex exercitation veniam id Lorem est cupidatat ipsum irure aliquip ad.
       user:
         name: Kaleb Mccormick
         description: CEO at Company
         avatar:
           src: https://i.pravatar.cc/120?img=8
-          loading: lazy
     - quote: Magna officia quis ea ea in officia non voluptate ipsum culpa do labore sunt. Aute est dolore commodo sint officia ad laboris dolor magna aliquip exercitation tempor commodo.
       user:
         name: Jazmin Mccall
         description: CEO at Company
         avatar:
           src: https://i.pravatar.cc/120?img=9
-          loading: lazy
 cta:
   title: Get started today
   description: Nisi mollit id aliquip sunt est laborum sit sit.

content/2.pricing.yml

@@ -1,6 +1,6 @@
 title: Pricing
 description: Choose the plan that's right for you.
-navigation.icon: i-heroicons-credit-card
+navigation.icon: i-lucide-credit-card
 hero:
   title: A plan for every need
   description: Our plans are designed to meet the requirements of both beginners and players. Get the right plan that suits you.

content/3.blog.yml

@@ -1,3 +1,3 @@
 title: Blog
 description: Those are examples posts taken from Nuxt.com, they may be outdated and not render properly.
-navigation.icon: i-heroicons-newspaper
+navigation.icon: i-lucide-newspaper

content/3.blog/1.asian-cuisine.md

@@ -67,7 +67,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div
   ---
   label: 'Ingredients'
-  icon: 'i-heroicons-fire'
+  icon: 'i-lucide-flame'
   ---
   - 2 cups sushi rice, cooked and seasoned with<br/>rice vinegar, sugar, and salt
   - 10 sheets nori (seaweed)
@@ -79,7 +79,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div
   ---
   label: 'Instructions'
-  icon: 'i-heroicons-list-bullet-20-solid'
+  icon: 'i-lucide-list'
   ---
   - **Prepare Sushi Rice:**
   Cook sushi rice according to package instructions. Once cooked, season with a mixture of rice vinegar, sugar, and salt. Allow it to cool.
@@ -118,7 +118,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div{ .flex .space-between .w-full .items-center }
   ---
   label: Ingredients
-  icon: i-heroicons-fire
+  icon: i-lucide-flame
   ---
   - 1/2 lb (about 225g) ground pork
   - 1 cup finely shredded carrots
@@ -136,7 +136,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div
   ---
   label: Instructions
-  icon: i-heroicons-list-bullet-20-solid
+  icon: i-lucide-list
   ---
   - **Prepare the Filling:**
   In a pan, heat 2 tablespoons of vegetable oil. Add minced garlic and shallots, stir-frying until fragrant.
@@ -176,7 +176,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div{ .flex .space-between .w-full .items-center }
   ---
   label: Ingredients
-  icon: i-heroicons-fire
+  icon: i-lucide-flame
   ---
   - 2 cups cooked short-grain rice
   - 1 cup assorted vegetables (such as carrots, spinach, mushrooms, zucchini, bean sprouts)
@@ -194,7 +194,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div
   ---
   label: Instructions
-  icon: i-heroicons-list-bullet-20-solid
+  icon: i-lucide-list
   ---
   - **Cook the Rice:**
   Prepare 2 cups of short-grain rice according to package instructions.
@@ -238,7 +238,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div
   ---
   label: 'Ingredients'
-  icon: 'i-heroicons-fire'
+  icon: 'i-lucide-flame'
   ---
   - 2 1/4 teaspoons (1 packet) active dry yeast
   - 1 teaspoon sugar
@@ -252,7 +252,7 @@ Asian kitchens are a treasure trove of ingredients, each with its own story. Soy
   ::div
   ---
   label: 'Instructions'
-  icon: 'i-heroicons-list-bullet-20-solid'
+  icon: 'i-lucide-list'
   ---
   - **Activate the Yeast:**
   In a small bowl, combine the active dry yeast, sugar, and warm water. Let it sit for about 5-10 minutes until it becomes frothy.

content/3.blog/7.nuxt-ui.md

@@ -69,7 +69,7 @@ That's it! You can now use all the components and composables in your Nuxt app 
 
 Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.
 
-::callout{icon="i-heroicons-exclamation-triangle"}
+::warning
 You should remove them from your `modules` and `dependencies` if you've previously installed them.
 ::
 
@@ -107,13 +107,13 @@ You can read more on how to set it up on the [@nuxtjs/tailwindcss](https://tailw
 
 ### Many options
 
-| Key                   | Default         | Description                                                                                                 |
-|-----------------------|-----------------|-------------------------------------------------------------------------------------------------------------|
-| `prefix`              | `u`             | Define the prefix of the imported components.                                                               |
-| `global`              | `false`         | Expose components globally.                                                                                 |
-| `icons`               | `['heroicons']` | Icon collections to load.                                                                                   |
-| `safelistColors`      | `['primary']`   | Force safelisting of colors to need be purged.                                                              |
-| `disableGlobalStyles` | `false`         | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
+| Key                   | Default       | Description                                                                                                 |
+|-----------------------|---------------|-------------------------------------------------------------------------------------------------------------|
+| `prefix`              | `u`           | Define the prefix of the imported components.                                                               |
+| `global`              | `false`       | Expose components globally.                                                                                 |
+| `icons`               | `['lucide']`  | Icon collections to load.                                                                                   |
+| `safelistColors`      | `['primary']` | Force safelisting of colors to need be purged.                                                              |
+| `disableGlobalStyles` | `false`       | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
 
 Configure options in your `nuxt.config.ts` as such:
 
@@ -178,7 +178,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
 </template>
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::note
 You can find the default classes for each component under the `Config` section.
 ::
 
@@ -196,7 +196,7 @@ Some components have an `icon` prop that allows you to add an icon to the compon
 
 ```vue
 <template>
-  <UButton icon="i-heroicons-magnifying-glass" />
+  <UButton icon="i-lucide-search" />
 </template>
 ```
 

nuxt.schema.ts

@@ -17,42 +17,42 @@ export default defineNuxtSchema({
               title: 'Search Bar',
               description: 'Icon to display in the search bar.',
               icon: 'i-mdi-magnify',
-              default: 'i-heroicons-magnifying-glass-20-solid'
+              default: 'i-lucide-search'
             }),
             dark: field({
               type: 'icon',
               title: 'Dark mode',
               description: 'Icon of color mode button for dark mode.',
               icon: 'i-mdi-moon-waning-crescent',
-              default: 'i-heroicons-moon-20-solid'
+              default: 'i-lucide-moon'
             }),
             light: field({
               type: 'icon',
               title: 'Light mode',
               description: 'Icon of color mode button for light mode.',
               icon: 'i-mdi-white-balance-sunny',
-              default: 'i-heroicons-sun-20-solid'
+              default: 'i-lucide-sun'
             }),
             external: field({
               type: 'icon',
               title: 'External Link',
               description: 'Icon for external link.',
               icon: 'i-mdi-arrow-top-right',
-              default: 'i-heroicons-arrow-up-right-20-solid'
+              default: 'i-lucide-external-link'
             }),
             chevron: field({
               type: 'icon',
               title: 'Chevron',
               description: 'Icon for chevron.',
               icon: 'i-mdi-chevron-down',
-              default: 'i-heroicons-chevron-down-20-solid'
+              default: 'i-lucide-chevron-down'
             }),
             hash: field({
               type: 'icon',
               title: 'Hash',
               description: 'Icon for hash anchors.',
               icon: 'i-ph-hash',
-              default: 'i-heroicons-hashtag-20-solid'
+              default: 'i-lucide-hash'
             })
           }
         }),

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@iconify-json/lucide": "^1.2.25",
     "@iconify-json/simple-icons": "^1.2.22",
-    "@nuxt/content": "^3.0.1",
+    "@nuxt/content": "^3.1.0",
     "@nuxt/image": "^1.9.0",
     "@nuxt/ui-pro": "^3.0.0-alpha.12",
     "@vueuse/nuxt": "^12.5.0",