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 the ref 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`