Archived topic

GenerateBlocks custom SVG icons

5 replies · Started by konceptuel on April 23, 2020

Viewing posts 1–6 of 6

April 23, 2020 at 6:43 am #1251229

Hey Support,

1. How do I go about loading custom SVG icons in GenerateBlocks heading block?
2. Do I need to download SVG Icons and use the Safe SVG plugin?
3. Where du I get the Icon SVG HTML?

April 23, 2020 at 7:05 am #1251282

Hi there,

you don't need the Safe SVG plugin.

You will need to open your original SVG image file in a text editor to get to its HTML or you can use this site to do that:

https://jakearchibald.github.io/svgomg/

Then its just a case of copying the <SVG> markup into the field provided in GenerateBlocks.

April 24, 2020 at 12:41 am #1252703

Hi David,

brilliant, thank you :-)

April 24, 2020 at 2:55 am #1252923

Glad to be of help.

December 30, 2020 at 4:27 am #1599268

Hi Great GP Support!

Is it possible to pass sanitizing with the USE tag inside my SVG code (as a reference to an inline SVG symbol)?

For example:
<svg width="1em" height="1em" class="icon"><use href="#my-icon"/></svg>

Wipes to:
<svg width="1em" height="1em" class="icon"></svg>

Inline SVG:

<svg style="display:none">
  <symbol id="my-icon" viewBox="0 0 512 512">
    <path d="…" />
  </symbol>
</svg>

December 31, 2020 at 12:30 pm #1601038

Hi there,

It seems like <use> should work as long as it's a local reference (#something). I'm surprised it's stripping that out in your tests.

I'll dig deeper into it :)

This archived topic is closed to new replies.

Start building better websites today.