JsxSvg

Tip

View source on GitHub →

Renders an SVG string as a real JSX SVG tree. Useful when an icon comes from a server response, a user-provided field, or any other place where you have SVG markup but not a React element.

JsxSvg is exported from @eightshift/ui-components/icons and also has a dedicated subpath that pulls in only the renderer (and its parser dependency), without the rest of the icon bundle:

import { JsxSvg } from '@eightshift/ui-components/icons';
// or, lighter:
import { JsxSvg } from '@eightshift/ui-components/jsx-svg';

Basic usage

const svg = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>';

<JsxSvg svg={svg} />;

Customizing the rendered SVG

className is added to the root <svg> element:

<JsxSvg
	svg={svg}
	className='es:text-accent-600 es:size-6'
/>

ariaHidden (or aria-hidden) marks the SVG as decorative for assistive technology:

<JsxSvg
	svg={svg}
	ariaHidden
/>

Dynamic props on the SVG

If the SVG markup needs to react to component state, use customProps to inject JSX attributes and customPropBindings to map them to values.

<JsxSvg
	svg={svg}
	customProps='className={demo}'
	customPropBindings={{ demo: isActive ? 'es:text-accent-600' : 'es:text-surface-400' }}
/>

ID randomization

SVGs with id attributes (gradients, filters, clip paths) can clash when the same SVG is rendered multiple times on a page. JsxSvg rewrites every id to a random value by default.

Prop	Description
noIdRandomization	Set to true to keep the original id values.
idRandomizationPrefix	Prefix used for the rewritten IDs. Defaults to icon.

<JsxSvg
	svg={svg}
	idRandomizationPrefix='hero'
/>

Highlighted props

Prop	Description
svg	SVG markup as a string. Required — if missing or not a string, the component renders nothing.
className	Class added to the root <svg>.
ariaHidden	Marks the SVG as decorative.
customProps	Raw JSX attribute string injected into the root <svg>.
customPropBindings	Object of values referenced by customProps.
noIdRandomization	Disable automatic id rewriting.
idRandomizationPrefix	Prefix used when rewriting id attributes.