React

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

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

UXIcon takes the icon in its icon prop and any SVG prop (SVGProps<SVGSVGElement>), except children and dangerouslySetInnerHTML. It works with React 18 and 19, on the client and on the server (renderToString()).

Props

• Primitive props (strings, numbers, booleans, null, undefined) follow the ux_icon() rules, aria-hidden included.

• Other props (event handlers, style objects, refs) are passed to React as-is:

  <UXIcon icon={LucideTrash2Icon} onClick={remove} style={{ color: 'red' }} />

The dumped attributes use HTML names (class, stroke-width, xlink:href); they are converted to React props (className, strokeWidth, xlinkHref), and a dumped style string to a style object. A React-named prop you give (strokeWidth={2}) overrides the dumped HTML-named one.

By name

With an icon name known only at runtime, use UXLazyIcon with the name and the dumped loaders; fallback renders while the icon loads, or for an unknown name (default: nothing). Its other props are the ones of UXIcon:

import { UXLazyIcon } from '@silarhi/ux-icons-js/react'
import { loaders } from '../var/icons/loaders.js'

const icon = <UXLazyIcon name={data.icon} loaders={loaders} fallback={null} />

See dynamic icon names.

Without dangerouslySetInnerHTML

The SVG body is rendered as React elements, built from the dumped tree: nothing is parsed as HTML at runtime.