Lucide Web Components

Lucide Web Components

Lucide is a collection of open-source icons known for their beautiful and consistent design. The Franken WC package offers a streamlined way to integrate and display a variety of Lucide icons. With built-in options for size, stroke width, and other attributes, this component simplifies the process of incorporating iconography into your web applications.

This package is 374.25 kB (gzip: 80.51 kB). If you only need a few icons, consider copying them manually.

Installation via CDN

Just like any other regular JavaScript, you can include the Lucide Web Components on your page by adding them to the <head> section.

<script
  type="module"
  src="https://unpkg.com/[email protected]/dist/js/lucide.iife.js"
></script>

Installation via NPM

Alternatively, you can choose to install via NPM and update your app.js file accordingly.

npm install franken-wc

import "franken-wc/dist/js/lucide.iife.js";

And that’s it! You can now start using Lucide using <uk-lucide icon=""></uk-lucide> markup in your code.

Copy to clipboard 
  • <uk-lucide icon="smile"></uk-lucide>

Preventing layout shift

When loading Web Components, there may be a brief delay before the content is fully rendered. This can result in a flash of unstyled content or unprocessed templates. To mitigate this issue, add the uk-cloak attribute to hide the entire element until the JS has fully loaded on the page. For an even more polished experience, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.

<div class="size-4">
  <uk-lucide icon="smile" uk-cloak></uk-lucide>
</div>

Note If you’re using this package outside of Franken UI, you might need to implement your own uk-cloak. This is very easy with CSS.

[uk-cloak] {
  display: none !important;
}

Attributes

NameTypeDefaultDescription
custom-classStringAllows you to add custom CSS classes, which will be attached to the <svg> tag.
iconStringSpecifies the icon you want to display. Please see the Lucide website for the complete list of icons.
stroke-widthString2Customizes the stroke width of the icon.
heightString16Customizes the height of the icon.
widthString16Customizes the width of the icon.
Changelog
Support Reach out