Skip to content
UX Icons JS Bundle

Live examples

The icons below are rendered by renderIcon() from Lucide icons dumped by the bundle. The documentation build renders each one with ux_icon() too, and fails if the HTML differs: what you see is what Twig renders. The examples use this configuration:

config/packages/ux_icons.yaml
ux_icons:
    default_icon_attributes:
        width: 1.5em
        height: 1.5em
    icon_sets:
        lucide:
            icon_attributes:
                class: lucide
    aliases:
        delete: 'lucide:trash-2'

An icon

Section titled “An icon”

The dumped attributes already carry the configuration: the default size, and the class of the icon set. aria-hidden="true" is added, as the icon has no text alternative.

import { renderIcon } from '@silarhi/ux-icons-js'
import { LucideHeartIcon } from '../var/icons/index.js'


element.innerHTML = renderIcon(LucideHeartIcon)

Attributes

Section titled “Attributes”

Given attributes override the dumped ones; aria-label makes the icon meaningful, so no aria-hidden.

import { renderIcon } from '@silarhi/ux-icons-js'
import { LucideTrash2Icon } from '../var/icons/index.js'


element.innerHTML = renderIcon(LucideTrash2Icon, { class: 'text-danger', 'aria-label': 'Delete' })
 
import { renderIcon } from '@silarhi/ux-icons-js'
import { LucideCheckIcon } from '../var/icons/index.js'


element.innerHTML = renderIcon(LucideCheckIcon, { width: 48, height: 48, class: 'text-success' })

Token lists and styles

Section titled “Token lists and styles”

Arrays are token lists, null entries dropped; style objects are inline styles, null declarations dropped. See attributes.

import { renderIcon } from '@silarhi/ux-icons-js'
import { LucideStarIcon } from '../var/icons/index.js'


element.innerHTML = renderIcon(LucideStarIcon, { class: ['icon', null, 'active'], style: { color: '#e8a33d', rotate: null } })

Booleans

Section titled “Booleans”

data-* and aria-* booleans become "true" and "false", other false attributes are omitted.

import { renderIcon } from '@silarhi/ux-icons-js'
import { LucideBellIcon } from '../var/icons/index.js'


element.innerHTML = renderIcon(LucideBellIcon, { 'data-unread': true, 'aria-hidden': false, focusable: false })

JSON data attributes

Section titled “JSON data attributes”

data-* arrays and objects are JSON encoded like PHP json_encode().

import { renderIcon } from '@silarhi/ux-icons-js'
import { LucideSettingsIcon } from '../var/icons/index.js'


element.innerHTML = renderIcon(LucideSettingsIcon, { 'data-config': { panel: 'a/b', label: 'Réglages' } })

Aliases

Section titled “Aliases”

An alias is dumped too, with the attributes of its target.

import { renderIcon } from '@silarhi/ux-icons-js'
import { DeleteIcon } from '../var/icons/index.js'


element.innerHTML = renderIcon(DeleteIcon)

Made by SILARHI, released under the MIT license.