Title: Custom stroke SVG icons render solid-filled on frontend, but correct in editor
Last modified: 6. August 2026

---

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

 *  [teflonmann](https://de.wordpress.org/support/users/teflonmann/)
 * (@teflonmann)
 * [vor 2 Monaten](https://de.wordpress.org/support/topic/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
 *     ```wp-block-code
       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
 *     ```wp-block-code
       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
 *     ```wp-block-code
       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
 *     ```wp-block-code
       .kb-svg-icon-wrap svg [stroke] { fill: none; }
       ```
   

Ansicht von 1 Antwort (von insgesamt 1)

 *  Moderator [Support Moderator](https://de.wordpress.org/support/users/moderator/)
 * (@moderator)
 * [vor 2 Monaten](https://de.wordpress.org/support/topic/custom-stroke-svg-icons-render-solid-filled-on-frontend-but-correct-in-editor/#post-177579)
 * **Moderation Note:** sorry, I close this thread as you have asked your question
   in a German support forum in English. To keep the threads accessible to all people
   not speaking English, I kindly ask you to either rephrase your question in German
   or ask in the [International support forums](https://wordpress.org/support/).
   Thank you for your understanding.

Ansicht von 1 Antwort (von insgesamt 1)

 Das Thema „Custom stroke SVG icons render solid-filled on frontend, but correct
in editor“ ist für neue Antworten geschlossen.

 * In: [Plugins](https://de.wordpress.org/support/forum/plugins/)
 * 1 Antwort
 * 1 Teilnehmer
 * Letzte Antwort von: [Support Moderator](https://de.wordpress.org/support/users/moderator/)
 * Letzte Aktivität: [vor 2 Monaten](https://de.wordpress.org/support/topic/custom-stroke-svg-icons-render-solid-filled-on-frontend-but-correct-in-editor/#post-177579)
 * Status: nicht gelöst

## Themen

### Beliebteste Themen

### Unbeantwortete Themen

### Nicht-Support-Themen

### Gelöste Themen

### Ungelöste Themen

### Alle Themen