SVG Icon Does Not Show in Back-End

  • I am developing a plugin to insert SVG Icons into editable blocks like Paragraph or Heading.

    I able to insert the code but the SVG icons only show in front-end, they are invisible in the back-end

    Here is the code:

    <!-- wp:heading {"sneeitClientId":"69755458-1cc2-4859-9291-5025a5140737"} -->
<h2 class="wp-block-heading" data-sneeit-client-id="69755458-1cc2-4859-9291-5025a5140737">this is a heading<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg></h2>
<!-- /wp:heading -->

    Here is what I see on front-end:

    Here is what I see on the back-end

    Additionally, if I inspect the block with Chrome Inspector, edit HTML of the heading block (like adding a space) and enter then the icon shows.

    Could any expert know what is the reason of this issue?

    Thank you very much,

    Tien

Viewing 4 replies - 1 through 4 (of 4 total)

  • The only thing that comes to mind quickly is that there could be a CSS Style that’s making the SVG white, so it doesn’t show on your white background. That is the first thing that I’d check because it looks like there’s a big gap under the heading that’s blank, and that could easily be a white-on-white image.

    Thread Starter Tim Codex

    (@tien-nguyen)

    @catacaustic Thank you. I set the fill and the size for the SVG in my scss file. Here is the screenshot of my inspector:

    The problem is that if I right-click and choose Edit HTML on the SVG, then just enter (edit nothing) and the SVG will show. I think there is something else with the Browser DOM.

    Do you have any ideas? Thanks a lot.

    Moderator bcworkz

    (@bcworkz)

    I pasted your example code into a page’s code editor on my test site and it looks fine in the editor (styled view) for me. The issue could be related to theme editor styling. I’m currently using the 2021 theme.

    Note that your code does cause a “This block contains unexpected or invalid content.” warning to show. It works fine, but the editor doesn’t like it. It might be better off placed in a Custom HTML block. As usual, letting the editor “Attempt Block Recovery” makes a mess of things. There’s no harm in ignoring the warning, but its presence is kind of annoying.

    • This reply was modified 1 year, 10 months ago by bcworkz.
    Thread Starter Tim Codex

    (@tien-nguyen)

    @bcworkz Thank you very much. It is still not working in Heading / Paragraph blocks (Full Site Editor) even with the 2023 theme.

    Thanks for your reply.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘SVG Icon Does Not Show in Back-End’ is closed to new replies.