Documentation

IconHelper
in package

Helper class for rendering Lucide SVG icons.

Provides a centralized way to render icons with consistent styling and an easy migration path from legacy PNG icons.

Tags
category

View

author

HugoFara hugo.farajallah@protonmail.com

license

Unlicense http://unlicense.org/

link
https://hugofara.github.io/lwt/docs/php/files/src-backend-View-Helper-IconHelper.html
since
3.0.0

Table of Contents

Constants

ANIMATED_ICONS  = ['waiting' => true, 'waiting2' => true, 'indicator' => true]
Icons that should have the spinning animation.
ICON_MAP  = [ // Navigation & Controls 'arrow-000-medium' => 'arrow-right', 'arrow-180-medium' => 'arrow-left', 'arrow-circle-135' => 'refresh-cw', 'arrow-circle-225-left' => 'rewind', 'arrow-circle-315' => 'fast-forward', 'arrow-repeat' => 'repeat', 'arrow-norepeat' => 'repeat', // Use CSS to indicate "off" state 'arrow-stop' => 'square', 'control' => 'chevron-right', 'control-180' => 'chevron-left', 'control-stop' => 'chevrons-right', 'control-stop-180' => 'chevrons-left', 'navigation-000-button' => 'circle-chevron-right', 'navigation-000-button-light' => 'circle-chevron-right', 'navigation-180-button' => 'circle-chevron-left', 'navigation-180-button-light' => 'circle-chevron-left', // Actions - CRUD 'edit' => 'pencil', 'plus' => 'plus', 'plus-button' => 'circle-plus', 'minus' => 'minus', 'minus-button' => 'circle-minus', 'cross' => 'x', 'cross-button' => 'x-circle', 'cross-big' => 'x', 'tick' => 'check', 'tick-button' => 'circle-check', 'tick-button-small' => 'circle-check', 'pencil' => 'pencil', 'document--pencil' => 'file-pen', 'eraser' => 'eraser', 'broom' => 'brush', // Documents & Text 'book-open-bookmark' => 'book-open', 'book-open-text' => 'book-open-text', 'book--pencil' => 'book-open-check', 'notebook' => 'notebook', 'notebook--plus' => 'notebook-pen', 'notebook--minus' => 'notebook', 'notebook--pencil' => 'notebook-pen', 'sticky-note' => 'sticky-note', 'sticky-note--plus' => 'notepad-text-dashed', 'sticky-note--minus' => 'sticky-note', 'sticky-note--pencil' => 'file-pen-line', 'sticky-note-text' => 'notepad-text', 'sticky-notes' => 'layers', 'sticky-notes-stack' => 'layers', 'sticky-notes-text' => 'file-stack', 'new_line' => 'wrap-text', 'script-import' => 'file-down', // Cards & Flashcards 'card--plus' => 'square-plus', 'card--minus' => 'square-minus', 'card--pencil' => 'square-pen', 'cards-stack' => 'layers', // Feeds & RSS 'feed--plus' => 'rss', 'feed--pencil' => 'rss', // Storage & Archive 'drawer--plus' => 'archive', 'drawer--minus' => 'archive-x', 'inbox-download' => 'download', 'inbox-upload' => 'upload', // Status Indicators 'status' => 'circle-check', 'status-busy' => 'circle-x', 'status-away' => 'circle-dot', 'exclamation-red' => 'circle-alert', 'exclamation-button' => 'alert-circle', // Form Validation 'circle-x' => 'circle-x', 'asterisk' => 'asterisk', 'required' => 'asterisk', // Test Results 'test_correct' => 'circle-check', 'test_wrong' => 'circle-x', 'test_notyet' => 'circle-help', 'smiley' => 'smile', 'smiley-sad' => 'frown', 'thumb' => 'thumbs-up', 'thumb-up' => 'thumbs-up', // UI Elements 'funnel' => 'filter', 'funnel--minus' => 'filter-x', 'lightning' => 'zap', 'wizard' => 'wand-2', 'wrench-screwdriver' => 'settings', 'calculator' => 'calculator', 'clock' => 'clock', 'chain' => 'link', 'external' => 'external-link', 'printer' => 'printer', 'eye' => 'eye', 'star' => 'star', 'photo-album' => 'image', // Light Bulb (Show/Hide Translations) 'light-bulb' => 'lightbulb', 'light-bulb-off' => 'lightbulb-off', 'light-bulb-A' => 'lightbulb', 'light-bulb-off-A' => 'lightbulb-off', 'light-bulb-T' => 'lightbulb', 'light-bulb-off-T' => 'lightbulb-off', // Audio & Media 'speaker-volume' => 'volume-2', 'speaker-volume-none' => 'volume-x', // Help & Info 'question-balloon' => 'circle-help', 'question-frame' => 'help-circle', // Loading/Animated 'waiting' => 'loader-2', 'waiting2' => 'loader-2', 'indicator' => 'loader', // Placeholder 'placeholder' => 'circle', 'empty' => '', ]
Mapping from legacy icon names to Lucide icon names.
MUTED_ICONS  = ['navigation-000-button-light' => true, 'navigation-180-button-light' => true, 'placeholder' => true]
Icons that should have the "muted" style applied.

Methods

clickable()  : string
Render a clickable icon (adds 'click' class).
getAllMappings()  : array<string, string>
Get all icon mappings.
getInitScript()  : string
Render the JavaScript required to initialize Lucide icons.
getLucideName()  : string|null
Get the Lucide icon name for a legacy icon.
getStyles()  : string
Render the CSS required for icon styling.
hasMapping()  : bool
Check if a legacy icon name has a Lucide mapping.
link()  : string
Render an icon inside a link.
render()  : string
Render a Lucide icon.

Constants

ANIMATED_ICONS

Icons that should have the spinning animation.

private array<string, bool> ANIMATED_ICONS = ['waiting' => true, 'waiting2' => true, 'indicator' => true]

ICON_MAP

Mapping from legacy icon names to Lucide icon names.

private array<string, string> ICON_MAP = [ // Navigation & Controls 'arrow-000-medium' => 'arrow-right', 'arrow-180-medium' => 'arrow-left', 'arrow-circle-135' => 'refresh-cw', 'arrow-circle-225-left' => 'rewind', 'arrow-circle-315' => 'fast-forward', 'arrow-repeat' => 'repeat', 'arrow-norepeat' => 'repeat', // Use CSS to indicate "off" state 'arrow-stop' => 'square', 'control' => 'chevron-right', 'control-180' => 'chevron-left', 'control-stop' => 'chevrons-right', 'control-stop-180' => 'chevrons-left', 'navigation-000-button' => 'circle-chevron-right', 'navigation-000-button-light' => 'circle-chevron-right', 'navigation-180-button' => 'circle-chevron-left', 'navigation-180-button-light' => 'circle-chevron-left', // Actions - CRUD 'edit' => 'pencil', 'plus' => 'plus', 'plus-button' => 'circle-plus', 'minus' => 'minus', 'minus-button' => 'circle-minus', 'cross' => 'x', 'cross-button' => 'x-circle', 'cross-big' => 'x', 'tick' => 'check', 'tick-button' => 'circle-check', 'tick-button-small' => 'circle-check', 'pencil' => 'pencil', 'document--pencil' => 'file-pen', 'eraser' => 'eraser', 'broom' => 'brush', // Documents & Text 'book-open-bookmark' => 'book-open', 'book-open-text' => 'book-open-text', 'book--pencil' => 'book-open-check', 'notebook' => 'notebook', 'notebook--plus' => 'notebook-pen', 'notebook--minus' => 'notebook', 'notebook--pencil' => 'notebook-pen', 'sticky-note' => 'sticky-note', 'sticky-note--plus' => 'notepad-text-dashed', 'sticky-note--minus' => 'sticky-note', 'sticky-note--pencil' => 'file-pen-line', 'sticky-note-text' => 'notepad-text', 'sticky-notes' => 'layers', 'sticky-notes-stack' => 'layers', 'sticky-notes-text' => 'file-stack', 'new_line' => 'wrap-text', 'script-import' => 'file-down', // Cards & Flashcards 'card--plus' => 'square-plus', 'card--minus' => 'square-minus', 'card--pencil' => 'square-pen', 'cards-stack' => 'layers', // Feeds & RSS 'feed--plus' => 'rss', 'feed--pencil' => 'rss', // Storage & Archive 'drawer--plus' => 'archive', 'drawer--minus' => 'archive-x', 'inbox-download' => 'download', 'inbox-upload' => 'upload', // Status Indicators 'status' => 'circle-check', 'status-busy' => 'circle-x', 'status-away' => 'circle-dot', 'exclamation-red' => 'circle-alert', 'exclamation-button' => 'alert-circle', // Form Validation 'circle-x' => 'circle-x', 'asterisk' => 'asterisk', 'required' => 'asterisk', // Test Results 'test_correct' => 'circle-check', 'test_wrong' => 'circle-x', 'test_notyet' => 'circle-help', 'smiley' => 'smile', 'smiley-sad' => 'frown', 'thumb' => 'thumbs-up', 'thumb-up' => 'thumbs-up', // UI Elements 'funnel' => 'filter', 'funnel--minus' => 'filter-x', 'lightning' => 'zap', 'wizard' => 'wand-2', 'wrench-screwdriver' => 'settings', 'calculator' => 'calculator', 'clock' => 'clock', 'chain' => 'link', 'external' => 'external-link', 'printer' => 'printer', 'eye' => 'eye', 'star' => 'star', 'photo-album' => 'image', // Light Bulb (Show/Hide Translations) 'light-bulb' => 'lightbulb', 'light-bulb-off' => 'lightbulb-off', 'light-bulb-A' => 'lightbulb', 'light-bulb-off-A' => 'lightbulb-off', 'light-bulb-T' => 'lightbulb', 'light-bulb-off-T' => 'lightbulb-off', // Audio & Media 'speaker-volume' => 'volume-2', 'speaker-volume-none' => 'volume-x', // Help & Info 'question-balloon' => 'circle-help', 'question-frame' => 'help-circle', // Loading/Animated 'waiting' => 'loader-2', 'waiting2' => 'loader-2', 'indicator' => 'loader', // Placeholder 'placeholder' => 'circle', 'empty' => '', ]

Keys are the old PNG filenames (without extension), values are the Lucide icon names.

MUTED_ICONS

Icons that should have the "muted" style applied.

private array<string, bool> MUTED_ICONS = ['navigation-000-button-light' => true, 'navigation-180-button-light' => true, 'placeholder' => true]

Methods

clickable()

Render a clickable icon (adds 'click' class).

public static clickable(string $name[, array<string, mixed> $attrs = [] ]) : string
Parameters
$name : string

Icon name

$attrs : array<string, mixed> = []

Optional HTML attributes

Return values
string —

HTML for the clickable icon

getAllMappings()

Get all icon mappings.

public static getAllMappings() : array<string, string>
Return values
array<string, string> —

Array of legacy name => Lucide name

getInitScript()

Render the JavaScript required to initialize Lucide icons.

public static getInitScript() : string

This should be included once, typically at the end of the body or after all icons have been rendered.

Return values
string —

JavaScript script block

getLucideName()

Get the Lucide icon name for a legacy icon.

public static getLucideName(string $legacyName) : string|null
Parameters
$legacyName : string

Legacy PNG icon name (without extension)

Return values
string|null —

Lucide icon name, or null if not mapped

getStyles()

Render the CSS required for icon styling.

public static getStyles() : string

This should be included once in the page head.

Return values
string —

CSS style block

hasMapping()

Check if a legacy icon name has a Lucide mapping.

public static hasMapping(string $legacyName) : bool
Parameters
$legacyName : string

Legacy PNG icon name (without extension)

Return values
bool —

True if mapping exists

link()

Render an icon inside a link.

public static link(string $name, string $href[, array<string, mixed> $attrs = [] ][, array<string, mixed> $linkAttrs = [] ]) : string
Parameters
$name : string

Icon name

$href : string

Link URL

$attrs : array<string, mixed> = []

Optional attributes for the icon

$linkAttrs : array<string, mixed> = []

Optional attributes for the link

Return values
string —

HTML for the linked icon

render()

Render a Lucide icon.

public static render(string $name[, array<string, mixed> $attrs = [] ]) : string
Parameters
$name : string

Icon name (Lucide or legacy PNG name)

$attrs : array<string, mixed> = []

Optional HTML attributes

Return values
string —

HTML for the icon


        

        
    




    

    

                                

                

                                
    

        On this page

        
    


                

                            

            

    

        

            
Search results