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.
BDD
Feature: Echo Notification Icon Consistency in Minerva
Scenario: Verify Echo notification icon appearance in Minerva
Given the developer uses custom non-embedded SVG URLs
When the Echo notification icon is rendered
Then the icon should look identical to other icons in MinervaTest Steps
Test Case 1: Verify Echo Notification Icon Appearance in Minerva
- Navigate to the Minerva skin.
- AC1: Confirm that the Echo notification icon looks identical to other icons.
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
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T358246#10020076 |
