From ce79418c66374acce85aaf9d9d784d758afed701 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Fri, 28 Jun 2024 10:25:27 +0200
Subject: [PATCH] fix lab code examples (#2263)

---
 .../lib/codeExamples/createLabCodeExamples.ts | 28 +++++++++----------
 docs/icons/[name].md                          |  9 ++++--
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts b/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts
index 91b519016..4de2245e8 100644
--- a/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts
+++ b/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts
@@ -14,11 +14,11 @@ const getIconCodes = (): CodeExampleType => {
       title: 'Vanilla',
       code: `\
 import { createIcons, icons } from 'lucide';
-import { $Name } from '@lucide/lab';
+import { $CamelCase } from '@lucide/lab';
 
 createIcons({
   icons: {
-    $Name
+    $CamelCase
   }
 });
 
@@ -29,11 +29,11 @@ document.body.append('<i data-lucide="$Name"></i>');\
       language: 'tsx',
       title: 'React',
       code: `import { Icon } from 'lucide-react';
-import { $Name } from '@lucide/lab';
+import { $CamelCase } from '@lucide/lab';
 
 const App = () => {
   return (
-    <Icon iconNode={$Name} />
+    <Icon iconNode={$CamelCase} />
   );
 };
 
@@ -45,7 +45,7 @@ export default App;
       title: 'Vue',
       code: `<script setup>
 import { Icon } from 'lucide-vue-next';
-import { $Name } from '@lucide/lab';
+import { $CamelCase } from '@lucide/lab';
 </script>
 
 <template>
@@ -58,7 +58,7 @@ import { $Name } from '@lucide/lab';
       title: 'Svelte',
       code: `<script>
 import { Icon } from 'lucide-svelte';
-import { $Name } from '@lucide/lab';
+import { $CamelCase } from '@lucide/lab';
 </script>
 
 <Icon iconNode={burger} />
@@ -68,11 +68,11 @@ import { $Name } from '@lucide/lab';
       language: 'tsx',
       title: 'Preact',
       code: `import { Icon } from 'lucide-preact';
-import { $Name } from '@lucide/lab';
+import { $CamelCase } from '@lucide/lab';
 
 const App = () => {
   return (
-    <Icon iconNode={$Name} />
+    <Icon iconNode={$CamelCase} />
   );
 };
 
@@ -83,11 +83,11 @@ export default App;
       language: 'tsx',
       title: 'Solid',
       code: `import { Icon } from 'lucide-solid';
-import { $Name } from '@lucide/lab';
+import { $CamelCase } from '@lucide/lab';
 
 const App = () => {
   return (
-    <Icon iconNode={$Name} />
+    <Icon iconNode={$CamelCase} />
   );
 };
 
@@ -98,17 +98,17 @@ export default App;
       language: 'tsx',
       title: 'Angular',
       code: `// app.module.ts
-import { LucideAngularModule, $PascalCase } from 'lucide-angular';
-import { $Name } from '@lucide/lab';
+import { LucideAngularModule } from 'lucide-angular';
+import { $CamelCase } from '@lucide/lab';
 
 @NgModule({
   imports: [
-    LucideAngularModule.pick({ $Name })
+    LucideAngularModule.pick({ $CamelCase })
   ],
 })
 
 // app.component.html
-<lucide-icon name="$Name"></lucide-icon>
+<lucide-icon name="$CamelCase"></lucide-icon>
 `,
     },
   ];
diff --git a/docs/icons/[name].md b/docs/icons/[name].md
index bf9b2acff..e36102b6c 100644
--- a/docs/icons/[name].md
+++ b/docs/icons/[name].md
@@ -31,8 +31,13 @@ const tabs = computed(() => data.codeExamples?.map(
 
 const codeExample = computed(() => data.codeExamples?.map(
     (codeExample) => {
-      const pascalCase = startCase(camelCase( params.value.name)).replace(/\s/g, '')
-      return codeExample.code.replace(/\$PascalCase/g, pascalCase).replace(/\$Name/g, params.value.name)
+      const pascalCaseName = startCase(camelCase( params.value.name)).replace(/\s/g, '')
+      const camelCaseName = camelCase(params.value.name)
+
+      return codeExample.code
+        .replace(/\$PascalCase/g, pascalCaseName)
+        .replace(/\$CamelCase/g, camelCaseName)
+        .replace(/\$Name/g, params.value.name)
     }
   ).join('') ?? []
 )