{"id":177573,"date":"2026-08-06T12:09:08","date_gmt":"2026-08-06T10:09:08","guid":{"rendered":"https:\/\/de.wordpress.org\/support\/topic\/custom-stroke-svg-icons-render-solid-filled-on-frontend-but-correct-in-editor\/"},"modified":"2026-08-06T16:13:25","modified_gmt":"2026-08-06T14:13:25","slug":"custom-stroke-svg-icons-render-solid-filled-on-frontend-but-correct-in-editor","status":"closed","type":"topic","link":"https:\/\/de.wordpress.org\/support\/topic\/custom-stroke-svg-icons-render-solid-filled-on-frontend-but-correct-in-editor\/","title":{"rendered":"Custom stroke SVG icons render solid-filled on frontend, but correct in editor"},"content":{"rendered":"\n

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

Summary:<\/strong>
Custom SVG icons uploaded via the Kadence Blocks Pro icon manager, built with fill=\"none\"<\/code> and stroke=\"currentColor\"<\/code> 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.<\/p>\n\n\n\n

Root cause:<\/strong>
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}]}<\/code> JSON structure, and only the JS path correctly restores stroke-icon styling.<\/p>\n\n\n\n

In class-kadence-blocks-svg.php<\/code>, method generate_svg_elements()<\/code>:<\/p>\n\n\n\n

php<\/p>\n\n\n\n

foreach ( $aBs as $key => $attribute ) {\n    if ( ! in_array( $key, array( 'fill', 'stroke', 'none' ) ) ) {\n        $tmpAttr[ $key ] = $key . '=\"' . esc_attr( $attribute ) . '\"';\n    }\n}\n\nif ( isset( $aBs['fill'], $aBs['stroke'] ) && $aBs['fill'] === 'none' ) {\n    $tmpAttr['stroke'] = 'stroke=\"currentColor\"';\n}<\/code><\/pre>\n\n\n\n
fill<\/code> and stroke<\/code> are always stripped from each element by name in the first loop. The second block only re-adds stroke=\"currentColor\"<\/code> when the element originally had both fill=\"none\"<\/code> and a stroke<\/code> attribute \u2014 but it never re-adds fill=\"none\"<\/code>. The element ends up with a stroke<\/code> but no fill<\/code>, so it inherits fill=\"currentColor\"<\/code> from the parent <svg><\/code> wrapper (which is set unconditionally for custom icons) \u2014 resulting in a solid filled shape instead of an outlined one.<\/p>\n\n\n\n
For comparison, the equivalent editor-side JS logic (in the compiled blocks-icon.js<\/code>) handles this correctly by restoring both<\/strong> attributes:<\/p>\n\n\n\n
js<\/p>\n\n\n\n
if (attrs.fill === 'none' && attrs.stroke) {\n  override = { fill: 'none', stroke: 'currentColor' };\n}<\/code><\/pre>\n\n\n\n
Steps to reproduce:<\/strong><\/p>\n\n\n\n
    \n
  1. Create an SVG icon where every element has both fill=\"none\"<\/code> and stroke=\"currentColor\"<\/code> (plus stroke-width<\/code>, stroke-linecap<\/code>, stroke-linejoin<\/code> as needed), e.g. a simple rounded rectangle.<\/li>\n\n\n\n
  2. Upload it via Kadence Blocks Pro \u2192 Icon Manager („My Icons“).<\/li>\n\n\n\n
  3. Insert the icon into any icon-capable block (Icon, Info Box, Icon List, etc.).<\/li>\n\n\n\n
  4. Compare the block editor preview (correct, outlined) with the published page (incorrect, solid fill).<\/li>\n<\/ol>\n\n\n\n
    Expected behavior:<\/strong> Frontend rendering matches the editor rendering.<\/p>\n\n\n\n
    Suggested fix:<\/strong> In generate_svg_elements()<\/code>, restore fill=\"none\"<\/code> alongside stroke=\"currentColor\"<\/code> when the condition is met, mirroring the JS implementation:<\/p>\n\n\n\n
    php<\/p>\n\n\n\n
    if ( isset( $aBs['fill'], $aBs['stroke'] ) && $aBs['fill'] === 'none' ) {\n    $tmpAttr['fill'] = 'fill=\"none\"';\n    $tmpAttr['stroke'] = 'stroke=\"currentColor\"';\n}<\/code><\/pre>\n\n\n\n
    Current workaround<\/strong> (until fixed): targeted CSS forcing fill: none<\/code> on elements that carry a stroke<\/code> attribute:<\/p>\n\n\n\n
    css<\/p>\n\n\n\n
    .kb-svg-icon-wrap svg [stroke] { fill: none; }<\/code><\/pre>\n","protected":false},"template":"","class_list":["post-177573","topic","type-topic","status-closed","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/177573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/177573\/revisions"}],"wp:attachment":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=177573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}