mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-16 07:37:42 +01:00
11c6a2e917
* New setup for new NPM package * Add build scripts for dist * Add introduction readme * Refactor names * update package.json * remove log * rename variable * Factoring * Improve optimize script * Add eslint config * Eslint fixes * rename import * Move packeges * Setup rollup and build progress * Refactor scripts * fix lint error * remove lint disabler * Bring back old libraries * add indentation * reset packages directory * remove vscode setting files * 0.1.0-alpha.0 * new version * 0.1.0-alpha.1 * Fix build process * Add create element to the entry file * update version number * publish new alhpa version * fixing bugs * Add jest and tests * replace with XML createElement * set new version * Fix svg generation * Add tests for main library * Update docs * Adjust tests and selectors * update the spec * Update README.md * Update README.md * Update README.md * update version * Update README.md * Move function to helpers file * rename license, package and readme * Fix build files * rename packages Co-authored-by: Eric Fennis <eric.fennis@endurance.com>
157 lines
3.9 KiB
Markdown
157 lines
3.9 KiB
Markdown
# Lucide
|
||
|
||
[](https://discord.gg/EH6nSts)
|
||
|
||
## What is Lucide?
|
||
|
||
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
|
||
|
||
Note that we are completely independent from Feather, so **icons submitted here won't get added to Feather Icons or its associated librairies**.
|
||
|
||
## Table of Contents
|
||
|
||
* [Usage](#usage)
|
||
* [Figma](#figma)
|
||
* [Contributing](#contributing)
|
||
* [License](#license)
|
||
|
||
## 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>
|
||
```
|
||
|
||
## Usage
|
||
|
||
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 – Implementation Options](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
|
||
|
||
To reduce bundle size, lucide is build to be fully threeshakeble.
|
||
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';
|
||
|
||
// Caustion, this will import all the icons and bundle them.
|
||
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.
|
||
});
|
||
```
|
||
|
||
#### Threeshake the library, only use the icons you use
|
||
|
||
```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');
|
||
|
||
// Append HTMLElement in webpage
|
||
const myApp = document.getElementById('app');
|
||
myApp.appendChild(menuIcon);
|
||
```
|
||
|
||
### Figma
|
||
|
||
You can use the components from [this Figma file](https://www.figma.com/file/g0UipfQlRfGrntKPxZknM7/Featherity).
|
||
|
||
## Contributing
|
||
|
||
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).
|
||
|
||
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)
|
||
|
||
## Community
|
||
|
||
Join the community on our [Discord](https://discord.gg/EH6nSts) server!
|
||
|
||
## License
|
||
|
||
Lucide is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
|