Background

We're currently using data URI embedding for CSS-only icon SVGs, which was previously needed to change the color via the SVG's fill attribute. This impacts performance when the CSS-only icon mixin is used in render-blocking styles, as the icons are loaded with the initial CSS, potentially causing delays, whereas a URL pointing to an SVG could be loaded asynchronously. This is particularly noticeable in Minerva/Vector, which make heavy use of icons and cannot use the Codex mixin without introducing an addition 10kb+ of render blocking CSS which would impact first paint and other performance metrics.

We are no longer using fill for icons in browsers that support mask-image since background-color is used to set the color instead, and it's also no longer used for the fallback background-image URLs, where we use opacity to approximate grayscale colors instead. We should explore supporting URL-hosted SVG files in the CSS-only icon mixin, rather than only supporting data URI-embedded SVGs.

Thanks to @Jdrewniak for reporting this.

For example consider the associated bytes for these 2 icons (first using ResourceLoaderImageModule, second using Codex):

• User icon in Minerva

.minerva-icon--userAvatarOutline {
    background-image: url(/w/load.php?modules=skins.minerva.overflow.icons&image=userAvatarOutline&format=original&lang=en&skin=minerva&version=1o6ca);
}

• Codex Echo notification in Minerva:

    .minerva-icon--bellOutline-base20 {
        -webkit-mask-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="0 0 20 20"fill="%23000000"><path d="M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>);
        mask-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="0 0 20 20"fill="%23000000"><path d="M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>);
}

User story

As a developer I want to use Codex for rendering all icons in my UI
As a user I want icons to render consistently across the UI.

Requirements

• On Minerva when logged in, viewing dark mode, the Echo notification should look identical to the other icons
• There should be no significant change in the stylesheet size when Vector/Minerva use the codex mixin.

Acceptance criteria

• There should be a mixin available that can be called that renders a mask-image using a URL rather than the embedded SVG

Communication criteria - does this need an announcement or discussion?

No visual changes expected - as this is is a change to the platform.

Rollback plan

It's assumed that any change will be opt in e.g. a new mixin or a new parameter to the existing mixin to allow the web team to carefully adopt this.

This task was created by Version 1.0.0 of the Web team task template using phabulous