Page MenuHomePhabricator

Icon: explore supporting custom non-embedded SVG URLs for CSS-only icons
Open, HighPublic

Description

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

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

What is exactly meant with utf-8 encoding, the utf8 piece in the data URI?

This comment was removed by AnneT.
Catrope renamed this task from Icon: explore removing utf-8 encoding for CSS icon URLs to Icon: explore supporting custom non-embedded SVG URLs for CSS-only icons.Feb 26 2024, 5:50 PM
Catrope reopened this task as Open.
Catrope updated the task description. (Show Details)

I've rewritten this task to reflect what I think Jan meant, as opposed to what he said :)

CCiufo-WMF subscribed.

Moving to the backlog awaiting results from T358392

Jdlrobson subscribed.

Updated task description per DST/Web sync.

Change #1038914 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Icons render consistently in night mode

https://gerrit.wikimedia.org/r/1038914

Change #1038911 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] POC: Support mask-image in ResourceLoader ImageModule

https://gerrit.wikimedia.org/r/1038911

A potential solution to this would be to adapt ResourceLoader's ImageModule to support mask-image - https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1038911 - if Codex was to then provide a version of .cdx-mixin-css-icon which supported a URL passed as the first parameter, I think the web team could render all its icons consistently.

Change #1038914 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Icons render consistently in night mode

Reason:

We will talk to the Design Systems Team about this potential solution tomorrow.

https://gerrit.wikimedia.org/r/1038914

Change #1038911 abandoned by Jdlrobson:

[mediawiki/core@master] POC: Support mask-image in ResourceLoader ImageModule

Reason:

My understand is Jan spoke to DST about this. Let me know if this patch is useful and when you would have capacity to work on and I can restore it then if needed.

https://gerrit.wikimedia.org/r/1038911