5c96b8d848
* site: pull data from "icons" dir * site: display icons * site: remove redundant code * site: colour mode support * site: header * site: order imports * site: search * site: add toast when copying icon * site: styling * site: hero * fix: disable theme toggle transitions * feat: Use Yarn Workspaces * refactor: Update site deploy scripts * refactor: Remove dark mode for now * feat: Add site title * refactor: Fix warning and format * feat: Add dark mode back 👀 * feat: Escape key to reset query * Fix by aelfric * Add Github link * Fix #40 * Add site overlay * sort categories * Add detail page * Add first categories * add box * move site to root directory * fix merge issues * Fix routing issues * Fix icon overlay * Add copy and download icon * Fix style issues * Add text * update chakra UI * remove import * update dependecies * add lucide react * Fix bugs * delete stats files * update charkra version Co-authored-by: John Letey <johnletey@gmail.com> Co-authored-by: appmachine <appmachine@appmachines-iMac.local>
Lucide
What is Lucide?
Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.
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.