mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-16 07:37:42 +01:00
docs: Update readme files (#2102)
* Update lucide readme * Add Readme and update package.jsons * Update readme * Update package logos * Update darkmode logos * Update title build font readme
This commit is contained in:
Eric Fennis
@@ -1,3 +1,13 @@
|
||||
<p align="center">
|
||||
<a href="https://github.com/lucide-icons/lucide#gh-light-mode-only">
|
||||
<img src="https://lucide.dev/package-logos/lucide-static.svg#gh-light-mode-only" alt="Lucide Static - Implementation of the lucide icon library for web applications." width="400">
|
||||
</a>
|
||||
<a href="https://github.com/lucide-icons/lucide#gh-dark-mode-only">
|
||||
<img src="https://lucide.dev/package-logos/package-logos/dark/lucide-static.svg#gh-dark-mode-only" alt="Lucide Static - Implementation of the lucide icon library for web applications." width="400">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
# Lucide Static
|
||||
|
||||
This package include the following lucide implementations:
|
||||
@@ -30,168 +40,26 @@ or
|
||||
npm install lucide-static
|
||||
```
|
||||
|
||||
### CDN
|
||||
## Documentation
|
||||
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
|
||||
|
||||
<!-- Icon Font -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'LucideIcons';
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
|
||||
|
||||
### SVG Files
|
||||
|
||||
#### Svg file as image
|
||||
|
||||
To use it in for example html:
|
||||
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="~lucide-static/icons/home.svg" />
|
||||
```
|
||||
|
||||
```css
|
||||
.home-icon {
|
||||
background-image: url(~lucide-static/icons/home.svg);
|
||||
}
|
||||
```
|
||||
|
||||
Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
|
||||
|
||||
#### Svg file Inline
|
||||
|
||||
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/).
|
||||
|
||||
```js
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right';
|
||||
|
||||
// return string of a svg
|
||||
```
|
||||
|
||||
### SVG Sprite
|
||||
|
||||
You may need additional loader for this.
|
||||
|
||||
```html
|
||||
<!-- Icon Sprite, not recommended for production! -->
|
||||
<img src="lucide-static/sprite.svg#home" />
|
||||
|
||||
<!-- 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 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
```
|
||||
|
||||
and update the svg as follows
|
||||
|
||||
```svg
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="lucide-icon"
|
||||
>
|
||||
<use
|
||||
href="#alert-triangle"
|
||||
/>
|
||||
</svg>
|
||||
<svg>
|
||||
...sprite svg
|
||||
</svg>
|
||||
```
|
||||
|
||||
### Icon Font
|
||||
|
||||
```css
|
||||
@import ('~lucide-static/font/lucide.css');
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="icon-home"></div>
|
||||
```
|
||||
|
||||
### Node.js
|
||||
|
||||
To use lucide icons in your Nodejs project you can import each icon as:
|
||||
|
||||
```js
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
```
|
||||
|
||||
> Note: Each icon name is in camelCase.
|
||||
|
||||
#### Example in node.js project
|
||||
|
||||
```js
|
||||
const express = require('express');
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
const app = express();
|
||||
const port = 3000;
|
||||
|
||||
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>
|
||||
`);
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening at http://localhost:${port}`);
|
||||
});
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
|
||||
|
||||
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/main/README.md)
|
||||
For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-static)
|
||||
|
||||
## Community
|
||||
|
||||
Join the community on our [Discord](https://discord.gg/EH6nSts) server!
|
||||
Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
|
||||
|
||||
## License
|
||||
|
||||
Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE).
|
||||
Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license).
|
||||
|
||||
## Sponsors
|
||||
|
||||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
|
||||
<img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||
</a>
|
||||
|
||||
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
|
||||
|
||||
### Awesome backer 🍺
|
||||
|
||||
<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
|
||||
|
||||
Reference in New Issue
Block a user