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>
3.9 KiB
Lucide
What is Lucide?
Lucide is a community-run fork of Feather Icons, 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
Installation
Package Managers
npm install lucide
#or
yarn add lucide
CDN
<!-- 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 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
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
<!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.
<!-- Your HTML file -->
<i icon-name="menu"></i>
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:
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
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
Custom Element binding
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.
Contributing
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Community
Join the community on our Discord server!
License
Lucide is licensed under the ISC License.