mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
docs: update lucide-static documentation about raw string imports (#3524)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user