docs: update lucide-static documentation about raw string imports (#3524)

This commit is contained in:
Pascal Duez
2025-09-11 09:41:17 +02:00
committed by GitHub
parent 99427026a3
commit c368d01d92
+25 -8
View File
@@ -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>