2021-11-21 21:08:10 +01:00
# Lucide Static
This package include the following lucide implementations:
2023-04-23 10:31:02 +02:00
- All SVG files
- SVG sprite
2021-11-21 21:08:10 +01:00
- Icon fonts
2023-04-23 10:31:02 +02:00
- JavaScript library containing strings of SVGs.
2021-11-21 21:08:10 +01:00
## Why lucide-static?
2023-04-23 10:31:02 +02:00
This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.
2021-11-21 21:08:10 +01:00
2023-06-12 22:10:15 +02:00
::: warning
While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and tree-shaking to make sure only the icons you use are bundled with your app. Tree-shaking is only available in these packages: [lucide ](lucide ), [lucide-react ](lucide-react ), [lucide-vue ](lucide-vue ), [lucide-vue-next ](lucide-vue-next ), [lucide-angular ](lucide-angular ), [lucide-preact ](lucide-preact )
:::
2021-11-21 21:08:10 +01:00
## Installation
## Package Managers
2023-06-12 22:10:15 +02:00
::: code-group
```sh [pnpm]
pnpm install lucide-static
2022-10-27 08:19:45 +02:00
```
2021-11-21 21:08:10 +01:00
2023-06-12 22:10:15 +02:00
```sh [yarn]
yarn add lucide-static
```
2021-11-21 21:08:10 +01:00
2023-06-12 22:10:15 +02:00
```sh [npm]
2021-11-21 21:08:10 +01:00
npm install lucide-static
```
2024-11-29 09:11:30 +01:00
```sh [bun]
bun add lucide-static
```
2023-06-12 22:10:15 +02:00
:::
2021-11-21 21:08:10 +01:00
### CDN
2022-10-27 08:19:45 +02:00
```html
2023-04-23 10:31:02 +02:00
<!-- SVG file for a single icon -->
2022-10-27 08:19:45 +02:00
<img src="https://unpkg.com/lucide-static@latest/icons/home .svg" />
2021-11-21 21:08:10 +01:00
2023-04-23 10:31:02 +02:00
<!-- Icon font -->
2021-11-21 21:08:10 +01:00
<style>
@font -face {
2022-10-27 08:19:45 +02:00
font-family: 'LucideIcons';
src: url(https://unpkg.com/lucide-static@latest/font/Lucide .ttf) format('truetype');
2021-11-21 21:08:10 +01:00
}
</style>
```
## Usage
2023-04-23 10:31:02 +02:00
Check out the [codesandbox examples ](https://codesandbox.io/s/using-the-svg-sprite-lz1kk ).
2021-11-21 21:08:10 +01:00
### SVG Files
2023-04-23 10:31:02 +02:00
#### SVG file as image
2021-11-21 21:08:10 +01:00
To use it in for example html:
2022-10-27 08:19:45 +02:00
```html
2023-04-23 10:31:02 +02:00
<!-- SVG file for a single icon -->
2022-10-27 08:19:45 +02:00
<img src="~lucide-static/icons/home.svg" />
2021-11-21 21:08:10 +01:00
```
2022-10-27 08:19:45 +02:00
```css
2021-11-21 21:08:10 +01:00
.home-icon {
2022-10-27 08:19:45 +02:00
background-image: url(~lucide-static/icons/home.svg);
2021-11-21 21:08:10 +01:00
}
```
Make sure you have the correct webpack loaders to make this work. [url-loader ](https://v4.webpack.js.org/loaders/url-loader/ )
2023-04-23 10:31:02 +02:00
#### SVG file as string
2021-11-21 21:08:10 +01:00
2023-04-23 10:31:02 +02:00
You can simply import each SVG by targeting `lucide-static/icons/{icon-name}.svg` .
To use SVGs in your project you can for example use a [SVG loader ](https://v4.webpack.js.org/loaders/svg-inline-loader/ ).
2021-11-21 21:08:10 +01:00
```js
2022-10-27 08:19:45 +02:00
import arrowRightIcon from 'lucide-static/icons/arrow-right';
2021-11-21 21:08:10 +01:00
2023-04-23 10:31:02 +02:00
// return string of an SVG
2021-11-21 21:08:10 +01:00
```
### SVG Sprite
You may need additional loader for this.
```html
<!-- Icon Sprite, not recommended for production! -->
2022-10-27 08:19:45 +02:00
<img src="lucide-static/sprite.svg#home " />
2021-11-21 21:08:10 +01:00
<!-- or -->
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="#alert -triangle" />
</svg>
<svg>
...sprite svg
</svg>
```
If you'd prefer, you can use CSS to hold your base SVG properties
```css
.lucide-icon {
2022-10-27 08:19:45 +02:00
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
2021-11-21 21:08:10 +01:00
}
```
2023-04-23 10:31:02 +02:00
and update the SVG as follows
2021-11-21 21:08:10 +01:00
2023-06-04 16:59:38 +02:00
```xml
2021-11-21 21:08:10 +01:00
<svg
xmlns="http://www.w3.org/2000/svg"
class="lucide-icon"
>
<use
href="#alert -triangle"
/>
</svg>
<svg>
...sprite svg
</svg>
```
### Icon Font
```css
2024-05-03 08:34:04 +02:00
@import ('~lucide-static/font/lucide.css');
2021-11-21 21:08:10 +01:00
```
```html
<div class="icon-home"></div>
```
### Node.js
To use lucide icons in your Nodejs project you can import each icon as:
```js
2022-10-27 08:19:45 +02:00
const { messageSquare } = require('lucide-static/lib');
2021-11-21 21:08:10 +01:00
```
> Note: Each icon name is in camelCase.
#### Example in node.js project
```js
2022-10-27 08:19:45 +02:00
const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;
2021-11-21 21:08:10 +01:00
app.get('/', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Lucide Icons</h1>
<p>This is a lucide icon ${messageSquare}</p>
</body>
</html>
2022-10-27 08:19:45 +02:00
`);
});
2021-11-21 21:08:10 +01:00
app.listen(port, () => {
2022-10-27 08:19:45 +02:00
console.log(`Example app listening at http://localhost:${port}` );
});
2021-11-21 21:08:10 +01:00
```
