Skip to content

Latest commit

 

History

History
156 lines (108 loc) · 3.93 KB

README.md

File metadata and controls

156 lines (108 loc) · 3.93 KB

Lucide

Discord

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.