Lucide Icons

The lucide-icons plugin integrates the popular Lucide  icon library into the template. It uses a custom setup to only bundle the specific icons used in the template, ensuring optimal performance and smaller bundle sizes through tree-shaking.

In development, it is implemented in assets/js/modules/lucide-icons.js and initialized automatically. The default stroke-width for all rendered icons is set to 1.

Markup Requirements

To display an icon, use an element (typically an <i> tag) with the data-lucide attribute set to the name of the icon you want to render. You can control the size, color, and other styling using Tailwind CSS utility classes like size-4, text-black, etc.

Markup Example

Below is an example showing how to include icons in your HTML:

<!-- Basic usage -->
<i data-lucide="chevron-right"></i>
 
<!-- With size and color utility classes -->
<i data-lucide="shield-check" class="size-6 text-primary"></i>
<i data-lucide="building-2" class="size-8 text-black/70"></i>

Adding New Icons

If you need to use an icon from Lucide that is not already included in the template, follow these steps:

1. Go to the Lucide Icons website  and find the icon you need.
2. Open assets/js/modules/lucide-icons.js in your text editor.
3. Import the new icon’s component name from the lucide package.
4. Add the imported icon to the icons object inside the createIcons function.

// Example: Adding the "Camera" icon
import {
  createIcons,
  // ... existing icons
  Camera, // 1. Import the icon
} from "lucide";
 
export function lucideIcons() {
  createIcons({
    attrs: {
      "stroke-width": 1,
    },
    icons: {
      // ... existing icons
      Camera, // 2. Add it to the configuration
    },
  });
}