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.
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.
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
Name | Type | Default | Description |
---|---|---|---|
custom-class | String | Allows you to add custom CSS classes, which will be attached to the <svg> tag. | |
icon | String | Specifies the icon you want to display. Please see the Lucide website for the complete list of icons. | |
stroke-width | String | 2 | Customizes the stroke width of the icon. |
height | String | 16 | Customizes the height of the icon. |
width | String | 16 | Customizes the width of the icon. |