silarhi / ux-icons-js-bundle

v0.3.2 2026-10-29 09:38 UTC

Requires

• php: >=8.2
• ext-dom: *
• symfony/console: ^6.4 || ^7.0 || ^8.0
• symfony/filesystem: ^6.4 || ^7.0 || ^8.0
• symfony/finder: ^6.4 || ^7.0 || ^8.0
• symfony/framework-bundle: ^6.4 || ^7.0 || ^8.0
• symfony/ux-icons: ^2.36.1 || ^3.5

Requires (Dev)

• ergebnis/composer-normalize: ^2.54.0
• friendsofphp/php-cs-fixer: ^3.95.27
• phpstan/extension-installer: ^1.4.3
• phpstan/phpstan: ^2.3.2
• phpstan/phpstan-strict-rules: ^2.1.0
• phpstan/phpstan-symfony: ^2.1.0
• phpunit/phpunit: ^11.5.57 || ^12.5.38 || ^13.4.1
• rector/rector: ^2.7.0
• symfony/asset-mapper: ^6.4 || ^7.0 || ^8.0
• symfony/error-handler: ^6.4 || ^7.0 || ^8.0
• symfony/http-client: ^6.4 || ^7.0 || ^8.0
• symfony/twig-bundle: ^6.4 || ^7.0 || ^8.0

Suggests

• symfony/asset-mapper: Maps the dumped icons as "var/icons" in the importmap

MIT

• Guillaume Sainthillier

• symfony
• react
• icons
• svg
• symfony-bundle
• typescript
• vue
• iconify
• symfony-ux
• Preact
• ux-icons

Published on Packagist.org on 2026-10-29 11:59 UTC

README

UX Icons JS Bundle

Render Symfony UX Icons in JavaScript, React, Preact and Vue.
Same attributes, same configuration, same HTML as ux_icon(), without innerHTML.

📖 Documentation

A backport of symfony/ux#4072 on top of an unmodified symfony/ux-icons, in two packages released from the same git tag:

• silarhi/ux-icons-js-bundle (PHP): dumps your local icons, with the attributes ux_icon() gives them, as a JavaScript module with one named export per icon.
• @silarhi/ux-icons-js (JS/TS): renders them in vanilla JavaScript, React, Preact or Vue.

Features

• Same output as ux_icon(): default_icon_attributes, icon set icon_attributes, suffixes and aliases come from your ux_icons configuration, and the attributes you give follow the ux_icon() rules.
• Tree-shaken: lucide:trash-2 is exported as LucideTrash2Icon, your bundler drops the icons you never import.
• Dynamic names: an icon name from an API response loads that icon alone, await loadIcon(loaders, data.icon).
• No innerHTML: createIconElement() builds SVG elements, the React, Preact and Vue components render elements.
• Works with ux:icons:lock: write the import first, run ux:icons:lock, the icon is downloaded and dumped.

Requirements

PHP 8.2+, Symfony 6.4 / 7.x / 8.x, symfony/ux-icons 2.36.1+ or 3.5+ (3.x needs PHP 8.4; see the compatibility notes for 2.x). React 18/19, Preact 10/11 and Vue 3 are optional peer dependencies.

Installation

composer require silarhi/ux-icons-js-bundle
pnpm add @silarhi/ux-icons-js

// config/bundles.php — after UXIconsBundle, whose configuration it reuses
Silarhi\UxIconsJsBundle\SilarhiUxIconsJsBundle::class => ['all' => true],

Quick start

The icons are dumped into var/icons/ on cache warmup, or with php bin/console ux-icons-js:dump:

import { createIconElement } from '@silarhi/ux-icons-js'
import { UXIcon } from '@silarhi/ux-icons-js/react' // or '@silarhi/ux-icons-js/preact', '@silarhi/ux-icons-js/vue'
import { LucideTrash2Icon } from '../var/icons/index.js'

button.append(createIconElement(LucideTrash2Icon, { class: 'text-danger', 'aria-label': 'Delete' }))

const icon = <UXIcon icon={LucideTrash2Icon} className="text-danger" aria-label="Delete" />

Documentation

Everything else is on ux-icons-js-bundle.silarhi.dev:

• Installation, quick start and live examples
• JavaScript: vanilla, dynamic names, attributes, React, Preact, Vue
• PHP: dumping icons, remote icons, Webpack Encore and AssetMapper
• Reference: configuration, compatibility, differences with symfony/ux#4072

Contributing

See CONTRIBUTING.md. Release notes are in CHANGELOG.md.

License

Released under the MIT License.