Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
When an <svg> element is inserted via the HTML-to-Bricks paste (or appears inside a pasted block), the Bricks builder stores and displays the attributes correctly — the element tree inside the editor shows viewBox="0 0 24 24", fill="none", stroke-width="1.5", etc., as a single value each.
However, on the frontend and on preview, every attribute on the outer <svg> is output twice, space-joined. Inspecting the live DOM shows:
<svg class="brxe-svg" id="brxe-aaerit"
viewBox="0 0 24 24 0 0 24 24"
fill="none none"
stroke="currentColor currentColor"
stroke-width="1.5 1.5"
stroke-linecap="round round"
stroke-linejoin="round round">
Because fill="none none" and the other doubled values are invalid per the SVG spec, browsers fall back to defaults — fill becomes black — and our outline icons render as solid black silhouettes instead of thin strokes.
Key observation
The duplication is a render-time bug, not a save-time bug:
-
In the Bricks builder, the element’s attributes are single and correct.
-
On the frontend (published page) and on preview mode, they are doubled.
This suggests Bricks’ frontend render pipeline is emitting the SVG attribute set twice — possibly once from its element data model and once by passing through the original SVG markup, or a similar dual-pass.
Input (pasted HTML)
<div class="about-values__icon">
<svg stroke-width="1.5" aria-hidden="true" focusable="false">
<use href="#sl-icon-shield-check"></use>
</svg>
</div>
#sl-icon-shield-check is a <symbol> injected sitewide via a wp_body_open code snippet, with its own viewBox, fill, stroke, stroke-linecap, stroke-linejoin attributes.
Expected
Frontend and preview output matches what the builder shows — each attribute present once with a single value.
Actual
Frontend/preview output has each attribute duplicated (fill="none none", viewBox="0 0 24 24 0 0 24 24", etc.), causing browsers to discard the invalid values and render with defaults. Icons appear as solid black silhouettes instead of outline strokes.
Steps to reproduce
-
In a Bricks page, paste HTML containing
<svg stroke-width="1.5"><use href="#some-symbol"/></svg>where the symbol is defined elsewhere on the page with its own presentation attributes (viewBox,fill,stroke, etc.). -
Convert to Bricks elements, save.
-
Inspect the element inside the Bricks builder — attributes appear correctly, single values.
-
Open the frontend or preview the page and inspect the same
<svg>in devtools — every attribute is doubled.
Environment
-
Bricks: 2.3.2
-
WordPress: 6.9.4
-
PHP: 8.4.18
-
Theme: Bricks child
-
Tested in: Chrome (frontend + preview mode)
Screenshots
-
Devtools on live frontend showing doubled attributes —
-
Live site render — icons as solid black silhouettes —
-
Local HTML render (same markup outside Bricks) — icons as proper outlines —
Workaround
None at the Bricks level. Currently avoiding the HTML paste path for SVG and using Code blocks, which is not a scalable solution for a site with many icons.