Lucide Icons Plugin

Introduction

The Lucide Icons Plugin offers a robust and flexible solution for incorporating Lucide icons into your website. This guide will walk you through leveraging the plugin to enhance your site's visual aesthetics with these meticulously designed icons.

For a comprehensive list of available icons and their corresponding names, please visit the Lucide Icons website. On the Lucide Icons site, clicking on any icon will display a popup at the bottom of the page where you can easily copy the icon's name for use in your project.

Enabling the Plugin

1. Open the Publii application and go to the Tools & Plugins section.
2. Find the Lucide Icons plugin in the list of available plugins.
3. Enable it by toggling the switch button at the bottom-left corner of the plugin's tile.

Plugin Configuration

Once the plugin is activated, various configuration options will be available to customize the appearance and behavior of the Lucide icons on your site.

Basic Options

This section covers settings to customize the default properties of the icons.

• Icon Size: Define the default size for the icons. This size is specified as a numerical value combined with the chosen unit.
• Icon Size Unit: Select the unit for the icon size. Options include 'px' (pixels), 'em', 'rem', 'vw' (viewport width), 'vh' (viewport height), 'vmin' (viewport minimum), and 'vmax' (viewport maximum).
• Stroke Width: Adjust the stroke width of the icons. This setting specifies the thickness of the icon lines in pixels.
• Stroke Color Option: Choose between using the current color or custom color for the icon stroke. The 'Use Current Color' option will inherit the color from the surrounding text or element.
• Custom Stroke Color: When 'Custom Color' is selected, you can define a custom stroke color. A color picker is provided to control the stroke color precisely.
• Vertical Align: Select the vertical alignment for the icons. Options include 'baseline', 'bottom', 'middle', 'sub', 'super', 'text-top', 'text-bottom', 'top', and a custom value for specific alignment.
• Custom Vertical Align Value: Enter a custom value for vertical alignment when 'Custom values' is selected. This allows precise adjustments like '-5px', '0.5em', or '5%' to align the icon perfectly with adjacent elements.

Advanced Options

These settings provide additional customization and accessibility options.

• ARIA Hidden Attribute: Set the default value for the 'aria-hidden' attribute to enhance accessibility. This attribute is crucial for improving the accessibility of your website and allows you to define the default state of the 'aria-hidden' attribute for the icons.
  • True: When set to 'true', the 'aria-hidden' attribute will be applied to the icons by default, causing assistive technologies like screen readers to ignore these icons. This is useful when icons are decorative and don't convey essential information.
  • False: If set to 'false', the 'aria-hidden' attribute will not be included in the icon's HTML, allowing screen readers to interpret the icons as part of the content.
• Icon Loading Method: Choose how the icons should be loaded on the production site:
  • Use SVG Map File: This method involves loading SVG maps from an external file, which is 246KB. While it enhances organization and results in cleaner HTML, it might increase page load times due to the additional server request.
  • Use Inline SVG Code: This approach embeds the SVG code directly within the HTML, leading to faster page loading by eliminating the need for an extra server request. However, it can increase the overall size of your HTML code, potentially affecting readability and maintenance.

  Note: Inline SVG code is generally preferred for faster loading on websites with a small number of icons because it embeds only the requested icons directly into the HTML. Using an SVG map file for websites with numerous icons can help maintain cleaner and more organized HTML, although it might result in slightly longer load times since it loads the entire file containing all the icons.

Using the Plugin

Lucide Icons can be incorporated into various parts of your site, including posts, menus, and footers. You can use the default settings configured in the plugin or override them with specific attributes in the shortcode. The plugin allows you to customize each icon's appearance directly within the shortcode, including size, color, stroke width, and aria-hidden attributes, or add your own CSS to match your design requirements.

For a comprehensive list of available icons and their corresponding names, please visit the Lucide Icons website. Clicking on any icon on the Lucide Icons site will display a popup at the bottom of the page. From there, you can easily copy the icon's name for use in the shortcode.

When using the custom shortcode for icons, ensure you follow the specific order of attributes as outlined below. This sequence is crucial for the correct rendering of icons.

The shortcode format is as follows:

[li=icon_name size=value_unit color=color_value class=class_names aria-hidden=true_or_false stroke-width=value]

Ensure you include the elements in this exact order: icon name, size, color (in HEX format), class, aria-hidden, and stroke width. The color should be specified in HEX format for proper interpretation and display by the plugin.

Examples:

<!-- Default Usage -->
[li=bell]

<!-- Example with Size and Color -->
[li=bell size=30px color=#ff0000]

<!-- Example with Size and Stroke Width -->
[li=bell size=4rem stroke-width=3]

<!-- Example with Full Customization -->
[li=bell size=4rem color=#00ff00 class=icon aria-hidden=false stroke-width=4]