<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" />