From 771cb0bbd679e00ceb0c649bbe1ffc60fed94434 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Sat, 3 May 2025 09:28:29 +0200
Subject: [PATCH] Update names in docs (#3184)

---
 docs/guide/advanced/accessibility.md       | 10 ++++++----
 docs/guide/advanced/aliased-names.md       |  6 +++---
 docs/guide/packages/lucide-angular.md      | 12 ++++++------
 docs/guide/packages/lucide-astro.md        |  4 ++--
 docs/guide/packages/lucide-preact.md       |  6 +++---
 docs/guide/packages/lucide-react-native.md |  6 +++---
 docs/guide/packages/lucide-react.md        |  4 ++--
 docs/guide/packages/lucide-solid.md        |  2 +-
 docs/guide/packages/lucide-static.md       |  2 +-
 docs/guide/packages/lucide-svelte.md       |  4 ++--
 docs/guide/packages/lucide-vue-next.md     |  4 ++--
 docs/guide/packages/lucide.md              |  4 ++--
 12 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/docs/guide/advanced/accessibility.md b/docs/guide/advanced/accessibility.md
index 986e391e2..131928c2a 100644
--- a/docs/guide/advanced/accessibility.md
+++ b/docs/guide/advanced/accessibility.md
@@ -139,22 +139,22 @@ contained icon.
 ```tsx
 // Don't do this
 <button class="btn-icon">
-  <Home/>
+  <House/>
 </button>
 
 // Don't do this either
 <button class="btn-icon">
-  <Home aria-label="Home icon"/>
+  <House aria-label="Home icon"/>
 </button>
 
 // This works but might not be the best solution, see below
 <button aria-label="Go to home" class="btn-icon">
-  <Home/>
+  <House/>
 </button>
 
 // Do this instead
 <button class="btn-icon">
-  <Home/>
+  <House/>
   <span class="visually-hidden">Go to home</span>
 </button>
 ```
@@ -167,6 +167,7 @@ Although you could provide accessible labels to your elements via the `aria-labe
 generally recommend avoiding this and instead suggest that you use your chosen CSS framework's "
 visually hidden" utility whenever possible. You can
 [read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/).
+
 ### Example - Radix UI
 
 Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).
@@ -179,6 +180,7 @@ import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
   <ArrowRightIcon />
 </AccessibleIcon>
 ```
+
 ### Example - Bootstrap
 
 ```html
diff --git a/docs/guide/advanced/aliased-names.md b/docs/guide/advanced/aliased-names.md
index 148af8faf..67ace7ec7 100644
--- a/docs/guide/advanced/aliased-names.md
+++ b/docs/guide/advanced/aliased-names.md
@@ -7,9 +7,9 @@ Beside aliases names lucide also includes prefixed and suffixed names to use wit
 ```tsx
 // These are all the same icon
 import {
-  Home,
-  HomeIcon,
-  LucideHome,
+  House,
+  HouseIcon,
+  LucideHouse,
 } from "lucide-react";
 ```
 
diff --git a/docs/guide/packages/lucide-angular.md b/docs/guide/packages/lucide-angular.md
index 1b1d4c776..ec79eb40d 100644
--- a/docs/guide/packages/lucide-angular.md
+++ b/docs/guide/packages/lucide-angular.md
@@ -31,11 +31,11 @@ bun add lucide-angular
 In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
 
 ```js
-import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
+import { LucideAngularModule, File, House, Menu, UserCheck } from 'lucide-angular';
 
 @NgModule({
   imports: [
-    LucideAngularModule.pick({File, Home, Menu, UserCheck})
+    LucideAngularModule.pick({File, House, Menu, UserCheck})
   ]
 })
 export class AppModule { }
@@ -64,7 +64,7 @@ Within your templates you may now use one of the following component tags to ins
 
 ```html
 <lucide-angular name="file" class="my-icon"></lucide-angular>
-<lucide-icon name="home" class="my-icon"></lucide-icon>
+<lucide-icon name="house" class="my-icon"></lucide-icon>
 <i-lucide name="menu" class="my-icon"></i-lucide>
 <span-lucide name="user-check" class="my-icon"></span-lucide>
 ```
@@ -88,7 +88,7 @@ You can pass additional props to adjust the icon appearance.
 | `absoluteStrokeWidth` | *boolean* | false        |
 
 ```html
-<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
+<i-lucide name="house" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
 ```
 
 ### Global configuration
@@ -151,11 +151,11 @@ They can be used in the same way as the official icons.
 
 ```js
 import { LucideAngularModule } from 'lucide-angular';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
 
 @NgModule({
   imports: [
-    LucideAngularModule.pick({ burger })
+    LucideAngularModule.pick({ coconut })
   ]
 })
 export class AppModule { }
diff --git a/docs/guide/packages/lucide-astro.md b/docs/guide/packages/lucide-astro.md
index d44def3d8..dc5e2bdc4 100644
--- a/docs/guide/packages/lucide-astro.md
+++ b/docs/guide/packages/lucide-astro.md
@@ -93,7 +93,7 @@ The package includes type definitions for all icons. This is useful if you want
 
 ```astro
 ---
-import { Home, Library, Cog, type Icon as IconType } from '@lucide/astro';
+import { House, Library, Cog, type Icon as IconType } from '@lucide/astro';
 
 type MenuItem = {
   name: string;
@@ -105,7 +105,7 @@ const menuItems: MenuItem[] = [
   {
     name: 'Home',
     href: '/',
-    icon: Home,
+    icon: House,
   },
   {
     name: 'Blog',
diff --git a/docs/guide/packages/lucide-preact.md b/docs/guide/packages/lucide-preact.md
index ea5d54a91..4247c6abf 100644
--- a/docs/guide/packages/lucide-preact.md
+++ b/docs/guide/packages/lucide-preact.md
@@ -84,10 +84,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
 
 ```jsx
 import { Icon } from 'lucide-preact';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
 
 const App = () => (
-  <Icon iconNode={burger} />
+  <Icon iconNode={coconut} />
 );
 ```
 
@@ -119,7 +119,7 @@ export default Icon;
 import Icon from './Icon';
 
 const App = () => {
-  return <Icon name="home" />;
+  return <Icon name="house" />;
 };
 
 export default App;
diff --git a/docs/guide/packages/lucide-react-native.md b/docs/guide/packages/lucide-react-native.md
index b3a5d8e80..374090f7d 100644
--- a/docs/guide/packages/lucide-react-native.md
+++ b/docs/guide/packages/lucide-react-native.md
@@ -78,10 +78,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
 
 ```jsx
 import { Icon } from 'lucide-react-native';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
 
 const App = () => (
-  <Icon iconNode={burger} />
+  <Icon iconNode={coconut} />
 );
 ```
 
@@ -113,7 +113,7 @@ export default Icon;
 import Icon from './Icon';
 
 const App = () => {
-  return <Icon name="home" />;
+  return <Icon name="house" />;
 };
 
 export default App;
diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md
index 45e7c10de..7794acdbf 100644
--- a/docs/guide/packages/lucide-react.md
+++ b/docs/guide/packages/lucide-react.md
@@ -78,10 +78,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
 
 ```jsx
 import { Icon } from 'lucide-react';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
 
 const App = () => (
-  <Icon iconNode={burger} />
+  <Icon iconNode={coconut} />
 );
 ```
 
diff --git a/docs/guide/packages/lucide-solid.md b/docs/guide/packages/lucide-solid.md
index 16a592504..c56d2851c 100644
--- a/docs/guide/packages/lucide-solid.md
+++ b/docs/guide/packages/lucide-solid.md
@@ -91,7 +91,7 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
 
 ```jsx
 import { Icon } from 'lucide-solid';
-import { burger, sausage } from '@lucide/lab';
+import { sausage } from '@lucide/lab';
 
 const App = () => (
   <Icon iconNode={sausage} color="red"/>
diff --git a/docs/guide/packages/lucide-static.md b/docs/guide/packages/lucide-static.md
index 5e89ba87f..09f87abb5 100644
--- a/docs/guide/packages/lucide-static.md
+++ b/docs/guide/packages/lucide-static.md
@@ -136,7 +136,7 @@ and update the SVG as follows
   class="lucide-icon"
 >
 <use
-    href="#alert-triangle"
+    href="#triangle-alert"
   />
 </svg>
 <svg>
diff --git a/docs/guide/packages/lucide-svelte.md b/docs/guide/packages/lucide-svelte.md
index 8012559a7..9418939a8 100644
--- a/docs/guide/packages/lucide-svelte.md
+++ b/docs/guide/packages/lucide-svelte.md
@@ -274,10 +274,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
 ```svelte
 <script>
 import { Icon } from '@lucide/svelte';
-import { burger, sausage } from '@lucide/lab';
+import { pear, sausage } from '@lucide/lab';
 </script>
 
-<Icon iconNode={burger} />
+<Icon iconNode={pear} />
 <Icon iconNode={sausage} color="red"/>
 ```
 
diff --git a/docs/guide/packages/lucide-vue-next.md b/docs/guide/packages/lucide-vue-next.md
index b34465b5d..c068eec82 100644
--- a/docs/guide/packages/lucide-vue-next.md
+++ b/docs/guide/packages/lucide-vue-next.md
@@ -81,11 +81,11 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
 ```vue
 <script setup>
 import { Icon } from 'lucide-vue-next';
-import { burger } from '@lucide/lab';
+import { baseball } from '@lucide/lab';
 </script>
 
 <template>
-  <Icon :iconNode="burger" />
+  <Icon :iconNode="baseball" />
 </template>
 ```
 
diff --git a/docs/guide/packages/lucide.md b/docs/guide/packages/lucide.md
index 5e8613a8f..26ff0e986 100644
--- a/docs/guide/packages/lucide.md
+++ b/docs/guide/packages/lucide.md
@@ -153,11 +153,11 @@ myApp.appendChild(menuIcon);
 They can be used in the same way as the official icons.
 
 ```js
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
 
 createIcons({
   icons: {
-    burger
+    coconut
   }
 });
 ```