Shape

Description

A block for adding SVG icons and shapes.

The Shape block can be added in two different ways:

Add the Shape block directly to the page.
You can position and style this however you require.
Add the Shape in the Container Block settings.
For creating shape overlays, see the Container block.

Shapes and Icons are output as an inline SVG, so its code is included in the webpage HTML. This allows for some CSS customisation of the SVG.

Toolbar

The Shape block has the following toolbar options.

Add to Container

Add the selected blocks inside a new Container Block

Block Settings

Choose a Shape or Icon display in the block.
You can choose an Icon or shape from the libraries or add a Custom SVG Shape.

Choose a Icon

container-shape-library-modal-2 — Add custom SVG HTML

Custom SVG

Most Icon sites provide options to download SVG icons in either a .svg file as raw SVG HTML. To add the a Custom SVG in the Shape settings requires the SVG HTML.

An example FontAwesome Icon SVG HTML:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="baseball-ball" class="svg-inline--fa fa-baseball-ball fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M368.5 363.9l28.8-13.9c11.1 22.9 26 43.2 44.1 60.9 34-42.5 54.5-96.3 54.5-154.9 0-58.5-20.4-112.2-54.2-154.6-17.8 17.3-32.6 37.1-43.6 59.5l-28.7-14.1c12.8-26 30-49 50.8-69C375.6 34.7 315 8 248 8 181.1 8 120.5 34.6 75.9 77.7c20.7 19.9 37.9 42.9 50.7 68.8l-28.7 14.1c-11-22.3-25.7-42.1-43.5-59.4C20.4 143.7 0 197.4 0 256c0 58.6 20.4 112.3 54.4 154.7 18.2-17.7 33.2-38 44.3-61l28.8 13.9c-12.9 26.7-30.3 50.3-51.5 70.7 44.5 43.1 105.1 69.7 172 69.7 66.8 0 127.3-26.5 171.9-69.5-21.1-20.4-38.5-43.9-51.4-70.6zm-228.3-32l-30.5-9.8c14.9-46.4 12.7-93.8-.6-134l30.4-10c15 45.6 18 99.9.7 153.8zm216.3-153.4l30.4 10c-13.2 40.1-15.5 87.5-.6 134l-30.5 9.8c-17.3-54-14.3-108.3.7-153.8z"></path></svg>

Converting and optimizing svg HTML

SVG HTML files can sometimes include unnecessary code, which may add weight to them or affect how it can be styled in the block editor. Or you may have a .svg file and need to convert it to SVG HTML.

A simple and efficient method of converting and optimising SVGS can be performed at the following site:

https://jakearchibald.github.io/svgomg

It allows you to paste HTML or upload a SVG File, and the copy the optimised HTML.

GenerateBlocks Pro – Icon & Shape Asset Library

With GenerateBlocks Pro you can create your own custom icon and shapes libraries using the Asset Library Feature.

Width & Height

Set the Width and Height of the SVG. This is a shortcut option for setting the relevant Sizing properties in the Styles tab.

Color

Set the Color value of the SVG. This is a shortcut option for setting the Typography > Color property. For this property to work the SVG HTML should include a fill or stroke attribute of currentColor . Most SVG icon libraries provide their icons in this way.

TIP: Fill and Stroke colors

In more advanced use cases users may need to set the Fill and Stroke color properties independently which can be applied in the Styles > More tab.

The Block HTML

An example of the blocks default HTML

<span class="gb-shape gb-shape-bb82adbe">
    <svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  .....></path</svg>
</span>