From fd31cb44a82abdd59fd5153af605f9d1e3484d0a Mon Sep 17 00:00:00 2001
From: Sage Fennel <mail@wavebeem.com>
Date: Wed, 10 Dec 2025 02:18:57 -0800
Subject: [PATCH] docs(dev): Fix code sample for vanilla JS (#3836)

* Fix code sample for vanilla JS

The .append method of elements takes plain text, not HTML. This updates the code to use .insertAdjacentHTML instead.

* Update createLabCodeExamples.ts

* fix(site): update createCodeExamples.ts vanilla JS code example

* Update createLabCodeExamples.ts

* Update createCodeExamples.ts

* Update createCodeExamples.ts

---------

Co-authored-by: Karsa <contact@karsa.org>
---
 .../lib/codeExamples/createCodeExamples.ts         | 14 ++++++++++----
 .../lib/codeExamples/createLabCodeExamples.ts      |  8 +++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/lib/codeExamples/createCodeExamples.ts b/docs/.vitepress/lib/codeExamples/createCodeExamples.ts
index b54abc1bc..eb6313431 100644
--- a/docs/.vitepress/lib/codeExamples/createCodeExamples.ts
+++ b/docs/.vitepress/lib/codeExamples/createCodeExamples.ts
@@ -9,14 +9,20 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'js',
+      language: 'html',
       title: 'Vanilla',
       code: `\
-import { createIcons, icons } from 'lucide';
+<script>
+import { createIcons, $CamelCase } from 'lucide';
 
-createIcons({ icons });
+createIcons({
+  icons: {
+    $CamelCase
+  }
+});
+</script>
 
-document.body.append('<i data-lucide="$Name"></i>');\
+<i data-lucide="$Name"></i>\
   `,
     },
     {
diff --git a/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts b/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts
index a977cde09..a38772523 100644
--- a/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts
+++ b/docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts
@@ -10,10 +10,11 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'js',
+      language: 'html',
       title: 'Vanilla',
       code: `\
-import { createIcons, icons } from 'lucide';
+<script>
+import { createIcons } from 'lucide';
 import { $CamelCase } from '@lucide/lab';
 
 createIcons({
@@ -21,8 +22,9 @@ createIcons({
     $CamelCase
   }
 });
+</script>
 
-document.body.append('<i data-lucide="$Name"></i>');\
+<i data-lucide="$Name"></i>\
   `,
     },
     {