Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Convert quicknav-arrow.png to a SVG

Vote:
 

The RenderEPiServerQuickNavigator() function generates a link to the CSS stylesheet /Util/styles/quicknavigator.css (example)

The #epi-quickNavigator .epi-quickNavigator-dropdown-arrow selector uses a PNG as a background, which is 15kb.  An SVG equivalent would be much smaller, for example the bootstrap Chevron down icon is 290 bytes (https://icons.getbootstrap.com/icons/chevron-down/). 

While not huge in the first place, to not seem obsessive: this Lighthouse message motivated me to look into it:


The SVG format is an easy replacement.  I did this to override the style:

@Html.RenderEPiServerQuickNavigator()
<style>
#epi-quickNavigator .epi-quickNavigator-dropdown-arrow {
	background-image: url(/Static/img/quicknav-arrow.svg);
}
</style>

Wouldn't be a bad thing to get switched on the official package.

#269118
Dec 28, 2021 18:08
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.