2020-10-25 22:16:39 +01:00
<p align=center><img width="410" src="https://lucide.netlify.app/logo-text.svg" alt="Lucide Logo"></p>
2020-10-06 20:23:26 +02:00
# Lucide
2020-06-08 16:39:52 +01:00
2020-10-06 23:03:11 +02:00
[](https://www.npmjs.com/package/lucide)
2020-06-26 17:20:06 +02:00
[](https://discord.gg/EH6nSts)
2020-06-08 16:39:52 +01:00
2020-10-06 20:23:26 +02:00
## What is Lucide?
2020-06-08 16:39:52 +01:00
2020-10-06 20:23:26 +02:00
Lucide is a community-run fork of [Feather Icons ](https://github.com/feathericons/feather ), open for anyone to contribute icons.
2020-10-05 20:30:34 +02:00
2020-06-08 16:39:52 +01:00
## Table of Contents
2020-10-20 17:22:22 +02:00
* [Installation ](#installation )
* [Package managers ](#package-managers )
* [CDN ](#cdn )
2020-06-08 16:39:52 +01:00
* [Usage ](#usage )
2020-10-20 17:22:22 +02:00
* [Unpkg ](#with-unpkg )
* [ESModules ](#with-esmodules )
* [Options ](#additional-options )
2020-10-31 11:11:18 -04:00
* [Treeshake library ](#treeshake-the-library-only-use-the-icons-you-use )
2020-10-20 17:22:22 +02:00
* [Custom binding ](#custom-element-binding )
2020-06-08 16:39:52 +01:00
* [Figma ](#figma )
* [Contributing ](#contributing )
2020-10-20 17:22:22 +02:00
* [Community ](#community )
2020-06-08 16:39:52 +01:00
* [License ](#license )
2020-10-06 20:23:26 +02:00
## Installation
### Package Managers
``` bash
npm install lucide
#or
yarn add lucide
```
### CDN
``` html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide .js"></script>
<!-- Production version -->
<script src="https://unpkg.com/lucide@latest "></script>
```
2020-06-08 16:39:52 +01:00
## Usage
2020-10-06 20:23:26 +02:00
At its core, Lucide is a collection of [SVG ](https://svgontheweb.com/#svg ) files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. `img` , `background-image` , `inline` , `object` , `embed` , `iframe` ). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – ](https://svgontheweb.com/#implementation )
The following are additional ways you can use Lucide.
With the Javascript library you can easily incorporate the icon you want in your webpage.
### With unpkg
Here is a complete example with unpkg
```html
<!DOCTYPE html>
<body>
<i icon-name="volume-2" class="my-class"></i>
<i icon-name="x"></i>
<i icon-name="menu"></i>
<script src="https://unpkg.com/lucide@latest "></script>
<script>
lucide.createIcons();
</script>
</body>
```
### With ESModules
2020-10-31 11:11:18 -04:00
To reduce bundle size, lucide is built to be fully treeshakable.
2020-10-06 20:23:26 +02:00
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
```html
<!-- Your HTML file -->
<i icon-name="menu"></i>
```
```js
import { createIcons, icons } from 'lucide';
2020-10-31 11:11:18 -04:00
// Caution, this will import all the icons and bundle them.
2020-10-06 20:23:26 +02:00
createIcons({icons});
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
```
#### Additional Options
In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
Here is a full example:
```js
import { createIcons } from 'lucide';
createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333 ',
},
nameAttr: 'icon-name', // atrribute for the icon name.
});
```
2020-10-31 11:11:18 -04:00
#### Treeshake the library, only use the icons you use
2020-10-06 20:23:26 +02:00
```js
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
```
#### Custom Element binding
```js
import { createElement, Menu } from 'lucide';
const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
// set custom attributes with browser native functions
menuIcon.setAttribute('stroke', '#333 ');
menuIcon.classList.add('my-icon-class');
2020-06-08 16:39:52 +01:00
2020-10-06 20:23:26 +02:00
// Append HTMLElement in webpage
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);
```
2020-06-08 16:39:52 +01:00
### Figma
2020-06-22 11:57:53 +02:00
You can use the components from [this Figma file ](https://www.figma.com/file/g0UipfQlRfGrntKPxZknM7/Featherity ).
2020-06-08 16:39:52 +01:00
## Contributing
2020-10-06 20:23:26 +02:00
For more info on how to contribute please see the [contribution guidelines ](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md ).
2020-06-08 16:39:52 +01:00
2020-10-06 20:23:26 +02:00
Caught a mistake or want to contribute to the documentation? [Edit this page on Github ](https://github.com/lucide-icons/lucide/blob/master/README.md )
2020-06-08 16:39:52 +01:00
2020-06-26 17:20:06 +02:00
## Community
2020-10-05 20:30:34 +02:00
Join the community on our [Discord ](https://discord.gg/EH6nSts ) server!
2020-06-26 17:20:06 +02:00
2020-06-08 16:39:52 +01:00
## License
2020-10-06 20:23:26 +02:00
Lucide is licensed under the [ISC License ](https://github.com/lucide-icons/lucide/blob/master/LICENSE ).
