<ev:icon>

The intention of the <ev:icon> tag is to render custom and standard SVG icons consistently across your theme and protected pages (e.g. checkout or authentication pages). Icon references such as "cart" are defined within your theme's Icon Registry ( ~/theme/config/icons.json ), which extends our Standard Icon Registry for Themes. This allows you to choose which of our standard icons you'd like to customise or whether to create non-standard icons.

SVG icon registry

The icon registry has a simple structure, where your icon references represent keys within a refs property. For example:

{
    "refs": {
        "cart": "~/theme/icons/cart.svg"
    }
}

Now, you can use this reference in your theme:

<ev:icon ref="cart" />

This will render as:

<i class="ev-icon">
<svg>... your SVG here ...</svg>
</i>

SVG icon standards

Evance's standard theme icons adhere to the following standards:

• Icon dimensions are 24 x 24 pixels.
• Icons typically have an internal 2 pixel safety margin.
• Icons use currentColor as the fill or stroke color.
• SVG icons MUST be valid XML.

Example of a valid SVG:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="11" width="12" height="2" fill="currentColor"/>
</svg>

The <ev:icon> tag

The icon reference may be supplied as a <ref> attribute (recommended) or as the text node for the tag.

<ev:icon ref="cart" />

is the same as...

<ev:icon>cart</ev:icon>

Using web fonts

For backwards compatibility this tag may also be used with web font based icons using CSS classes.

<ev:icon class="cart" />

Note the standard web fonts for Evance's themes will be phased out.

Using non-registry SVGs

Although not our preferred approach, you can use a raw SVG if you do not wish to use the registry.

<ev:icon src="assets/icons/my-icon.svg" />