Implementation of the lucide icon library for web applications.
npm install lucideor
yarn add lucide<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>Here is a complete example with unpkg
<!DOCTYPE html>
<body>
<i data-lucide="volume-2" class="my-class"></i>
<i data-lucide="x"></i>
<i data-lucide="menu"></i>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
</script>
</body>To reduce bundle size, lucide is built to be fully tree-shakable.
The createIcons function will search for HTMLElements with the attribute data-lucide and replace it with the svg from the given icon name.
<!-- Your HTML file -->
<i data-lucide="menu"></i>import { createIcons, icons } from 'lucide';
// Caution, 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
}
});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: 'data-lucide' // attribute for the icon name.
});import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe
}
});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);