Update names in docs (#3184)

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

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";
 ```
 

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 { }

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',

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;

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;

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} />
 );
 ```
 

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"/>

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>

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"/>
 ```
 

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>
 ```
 

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
   }
 });
 ```