Custom stroke SVG icons render solid-filled on frontend, but correct in editor

Plugin & Version: Kadence Blocks (Free), v3.7.9 — issue originates in includes/class-kadence-blocks-svg.php
Also affects: Kadence Blocks Pro custom icons (upload feature), since the frontend render path is shared

Summary:
Custom SVG icons uploaded via the Kadence Blocks Pro icon manager, built with fill="none" and stroke="currentColor" on each element (the standard „line icon“ pattern, e.g. Feather-style icons), render correctly in the block editor but appear as solid filled shapes on the published frontend.

Root cause:
The block editor (JS) and the frontend (PHP) use two separate code paths to reconstruct the stored SVG from the icon’s {vB, cD: [{nE, aBs}]} JSON structure, and only the JS path correctly restores stroke-icon styling.

In class-kadence-blocks-svg.php, method generate_svg_elements():

php

foreach ( $aBs as $key => $attribute ) {
    if ( ! in_array( $key, array( 'fill', 'stroke', 'none' ) ) ) {
        $tmpAttr[ $key ] = $key . '="' . esc_attr( $attribute ) . '"';
    }
}

if ( isset( $aBs['fill'], $aBs['stroke'] ) && $aBs['fill'] === 'none' ) {
    $tmpAttr['stroke'] = 'stroke="currentColor"';
}

fill and stroke are always stripped from each element by name in the first loop. The second block only re-adds stroke="currentColor" when the element originally had both fill="none" and a stroke attribute — but it never re-adds fill="none". The element ends up with a stroke but no fill, so it inherits fill="currentColor" from the parent <svg> wrapper (which is set unconditionally for custom icons) — resulting in a solid filled shape instead of an outlined one.

For comparison, the equivalent editor-side JS logic (in the compiled blocks-icon.js) handles this correctly by restoring both attributes:

js

if (attrs.fill === 'none' && attrs.stroke) {
  override = { fill: 'none', stroke: 'currentColor' };
}

Steps to reproduce:

1. Create an SVG icon where every element has both fill="none" and stroke="currentColor" (plus stroke-width, stroke-linecap, stroke-linejoin as needed), e.g. a simple rounded rectangle.
2. Upload it via Kadence Blocks Pro → Icon Manager („My Icons“).
3. Insert the icon into any icon-capable block (Icon, Info Box, Icon List, etc.).
4. Compare the block editor preview (correct, outlined) with the published page (incorrect, solid fill).

Expected behavior: Frontend rendering matches the editor rendering.

Suggested fix: In generate_svg_elements(), restore fill="none" alongside stroke="currentColor" when the condition is met, mirroring the JS implementation:

php

if ( isset( $aBs['fill'], $aBs['stroke'] ) && $aBs['fill'] === 'none' ) {
    $tmpAttr['fill'] = 'fill="none"';
    $tmpAttr['stroke'] = 'stroke="currentColor"';
}

Current workaround (until fixed): targeted CSS forcing fill: none on elements that carry a stroke attribute:

css

.kb-svg-icon-wrap svg [stroke] { fill: none; }