paste SVG code icons directly

  • Resolved Suki

    (@sukinoz)


    1 month, 3 weeks ago

    Great plugin. Congratulations!

    It would be good if you could paste SVG code icons directly

    Ps: To be honest, I’ve never dared to try it before because the plugin’s website looks abandoned or outdated. It’s striking that the website isn’t responsive, especially when we’re talking about the website for a WordPress plugin 😉

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Janis Elsts

    (@whiteshadow)

    1 month, 3 weeks ago

    You can use SVG code icons if you encode them the way that WordPress expects (see the $icon_url parameter). Specifically, base64-encode the icon, and add data:image/svg+xml;base64, to the beginning of the code. Then you can enter the result in the “Icon URL” field.

    For example, let’s take this icon from Bootstrap Icons:

    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-1-square" viewBox="0 0 16 16">
      <path d="M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z"/>
      <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/>
    </svg>

    Encode it to Base64 (I used http://www.base64encode.org for this example):

    PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktMS1zcXVhcmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTkuMjgzIDQuMDAyVjEySDcuOTcxVjUuMzM4aC0uMDY1TDYuMDcyIDYuNjU2VjUuMzg1bDEuODk5LTEuMzgzeiIvPgogIDxwYXRoIGQ9Ik0wIDJhMiAyIDAgMCAxIDItMmgxMmEyIDIgMCAwIDEgMiAydjEyYTIgMiAwIDAgMS0yIDJIMmEyIDIgMCAwIDEtMi0yem0xNSAwYTEgMSAwIDAgMC0xLTFIMmExIDEgMCAwIDAtMSAxdjEyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXoiLz4KPC9zdmc+

    Add the data:image/svg+xml;base64, prefix:

    data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktMS1zcXVhcmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTkuMjgzIDQuMDAyVjEySDcuOTcxVjUuMzM4aC0uMDY1TDYuMDcyIDYuNjU2VjUuMzg1bDEuODk5LTEuMzgzeiIvPgogIDxwYXRoIGQ9Ik0wIDJhMiAyIDAgMCAxIDItMmgxMmEyIDIgMCAwIDEgMiAydjEyYTIgMiAwIDAgMS0yIDJIMmEyIDIgMCAwIDEtMi0yem0xNSAwYTEgMSAwIDAgMC0xLTFIMmExIDEgMCAwIDAtMSAxdjEyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXoiLz4KPC9zdmc+

    Then you can put that code in the “Icon URL” field. Here’s what the result looks like on a custom menu item:

    Thread Starter Suki

    (@sukinoz)

    1 month, 3 weeks ago

    Thank you for your reply,
    and thank you very much for such a detailed response.

    I can confirm that the proposed system works (although you’d already made that very clear with a real-life example and screenshots!)

    A great plugin, no doubt, and a great developer.

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

You must be logged in to reply to this topic.