[Resolved] GenerateBlocks custom SVG icons

[konceptuel]

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?

[David]

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.

[konceptuel]

Hi David,

brilliant, thank you 🙂

[David]

Glad to be of help.

[Rafał]

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>

[Tom]

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 🙂

[Author]

Posts