From c368d01d928451b8ec0454940c5e281406b992c6 Mon Sep 17 00:00:00 2001
From: Pascal Duez <pascalduez@users.noreply.github.com>
Date: Thu, 11 Sep 2025 09:41:17 +0200
Subject: [PATCH] docs: update lucide-static documentation about raw string
 imports (#3524)

---
 docs/guide/packages/lucide-static.md | 33 +++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/docs/guide/packages/lucide-static.md b/docs/guide/packages/lucide-static.md
index da93aa81a..31eae0b99 100644
--- a/docs/guide/packages/lucide-static.md
+++ b/docs/guide/packages/lucide-static.md
@@ -101,12 +101,21 @@ Make sure you have the correct Webpack loader configured, such as [`url-loader`]
 
 To import an SVG as a string (e.g., for templating):
 
-```js
+::: code-group
+
+```js [Webpack]
 import arrowRightIcon from 'lucide-static/icons/arrow-right';
 ```
 
+```js [Vite]
+import arrowRightIcon from 'lucide-static/icons/arrow-right.svg?raw';
+```
+
+:::
+
 You'll need an SVG loader like [`svg-inline-loader`](https://v4.webpack.js.org/loaders/svg-inline-loader/).
 
+
 ### Using the SVG sprite
 
 :::danger
@@ -208,19 +217,27 @@ If you're not using a package manager, you can download the font files directly
 
 ## Node.js
 
-You can also import Lucide icons in Node.js (CommonJS) projects:
+You can also import Lucide icons in Node.js projects:
 
-```js
-const {messageSquare} = require('lucide-static/lib');
+::: code-group
+
+```js [ESM]
+import {MessageSquare} from 'lucide-static';
 ```
 
-> Note: Each icon name is in camelCase.
+```js [CommonJs]
+const {MessageSquare} = require('lucide-static');
+```
+
+:::
+
+> Note: Each icon name is in PascalCase.
 
 #### Express app example in Node.js
 
 ```js
-const express = require('express');
-const {messageSquare} = require('lucide-static/lib');
+import express from 'express';
+import {MessageSquare} from 'lucide-static';
 const app = express();
 const port = 3000;
 
@@ -233,7 +250,7 @@ app.get('/', (req, res) => {
       </head>
       <body>
         <h1>Lucide Icons</h1>
-        <p>This is a Lucide icon ${messageSquare}</p>
+        <p>This is a Lucide icon ${MessageSquare}</p>
 
       </body>
     </html>