config/icons.json
Contains an SVG icon registry for rendering icons consistently across your theme and protected Evance pages.
beta
Icon Registry is not be fully implemented - see supported tags below.
File format
The Icon Registry has a very simple JSON format. All icon references appear beneath a refs
property.
{
"refs": {
"cart": "~/theme/icons/cart.svg"
}
}
Using icon references
Referencing an icon in your Icon Registry is done using JavaScript dot notation allowing you to nest/group your icons together. For example, our standard icon set includes standard arrows left, right, up and down:
{
"refs": {
"arrow": {
"left": "~/theme/icons/arrow-left.svg",
"right": "~/theme/icons/arrow-right.svg",
"up": "~/theme/icons/arrow-up.svg",
"down": "~/theme/icons/arrow-down.svg"
}
}
}
The JavaScript dot notation for these will be
arrow.left
,
arrow.down
,
arrow.up
, and
arrow.right
respectively (see Standard Icons below).
Supported EV Tags
Icon Registry references are supported by the following EV Tags:
<ev:icon>
using theref
attribute
Standard Icons
Evance includes a number of standard icons, which you can customise within your theme.
arrow.left
|
|
arrow.right
|
|
arrow.up
|
|
arrow.down
|
|
cancel
|
|
cart
|
|
chevron.left
|
|
chevron.right
|
|
chevron.up
|
|
chevron.down
|
|
delete
|
|
filter
|
|
fullscreen.enter
|
|
fullscreen.exit
|
|
go.forwards
|
|
go.back
|
|
help
|
|
minus
|
|
plus
|
|
review.off
|
|
review.half
|
|
review.on
|
|
search
|
|
user
|
|
wishlist.off
|
|
wishlist.on
|
Standard Brand Icons
Evance includes a number of brand icons we use as standard for rendering social media and integrated partners.
brand.evance
|
|
brand.facebook
|
|
brand.flickr
|
|
brand.google
|
|
brand.instagram
|
|
brand.linkedin
|
|
brand.pinterest
|
|
brand.tiktok
|
|
brand.twitch
|
|
brand.twitter
|
|
brand.vimeo
|
|
brand.x
|
|
brand.youtube
|