GenerateBlocks Headline: using a .SVG file

[Arp]

I have some SVG icons that I’d like to use but there’s nothing in the documentation about this field. Is it possible to use my own icons or no?

[Tom]

Hi there,

It is, you just need to copy the SVG HTML (open the file in an editor) and paste it into the Custom SVG field in the options.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Arp]

I ended up using background images via css, the svgs threw me for a loop.

[Tom]

Hi there,

If you have an .svg file, you can open it up in Notepad or a code editor like Atom.

Then you’ll see something like this:

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
    <path d="M485.2 427.8l-99.1-46.2 15.8-34c5.6-11.9 8.8-24.3 10-36.7 3.3-33.7-9-67.3-33.2-91.1-8.9-8.7-19.3-16.1-31.3-21.7-11.9-5.6-24.3-8.8-36.7-10-33.7-3.3-67.4 9-91.1 33.2-8.7 8.9-16.1 19.3-21.7 31.3l-15.8 34-30.4 65.2c-.7 1.5-.1 3.3 1.5 4l65.2 30.4 34 15.8 34 15.8 68 31.7 74.7 34.8c-65 45.4-152.1 55.2-228.7 17.4C90.2 447.4 44.1 313.3 97.3 202.6c53.3-110.8 186-158.5 297.8-106.3 88.1 41.1 137.1 131.9 129.1 223.4-.1 1.3.6 2.4 1.7 3l65.6 30.6c1.8.8 3.9-.3 4.2-2.2 22.6-130.7-44-265.4-170.5-323.5-150.3-69-327-4.1-396.9 145.8-70 150.1-5.1 328.5 145.1 398.5 114.1 53.2 244.5 28.4 331.3-52.3 17.9-16.6 33.9-35.6 47.5-56.8 1-1.5.4-3.6-1.3-4.3l-65.7-30.7zm-235-109.6l15.8-34c8.8-18.8 31.1-26.9 49.8-18.1s26.9 31 18.1 49.8l-15.8 34-34-15.8-33.9-15.9z" class="st0"></path></svg>

That’s the code you paste into the Icon SVG HTML field.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Arp]

Thank you! Is that safe? When I was trying to figure out how to use the SVG I read that they need to be ‘cleaned’ or something.

[Tom]

The code is sanitized when it’s added to the HTML field and when it’s saved 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Arp]

Sweet!

[Author]

Posts