This is follow up T363920
Background
Migrating to Codex icons ensures consistency with icon styles and usage across skins/extensions, and allows to remove extra CSS and special icon cases
While we don't do this we waste time addressing issues such as T365951.
User story
As a developer, I want icons to be more maintainable and less prone to breaking, which will affect the end user
Design
- no visual changes
Acceptance criteria
- The modules for icons have been removed. In its place, a Codex CSS mixin is used to render icons.
- There is no increase in CSS bytes shipped, as we are using a URL to an SVG rather than an embedded data URI (a solution that should be provided by T358246)
- In night mode, all icons would behave correctly thanks to CSS variables, rather than a CSS filter (invert).
Communication criteria - does this need an announcement or discussion?
- No
Sign off
- Setup ticket for follow up task to remove need for ResourceLoader/ImageModule altogether.
QA
Ensure that icons in minerva are using mask image.
Requirement
Ensure that all icons in the Minerva skin are migrated to Codex, specifically focusing on the use of mask-image to render icons. This migration should improve consistency and maintainability while ensuring the correct behavior of icons in both light and night modes.
BDD
Feature: Migrate ResourceLoader Icons to Codex in Minerva
Scenario: Icons in Minerva use mask-image
Given icons are rendered in Minerva
When the user views the page
Then icons should be rendered using `mask-image`Test Steps
Test Case 1: Verify Icons Use mask-image in Minerva
- Visit any page using the Minerva skin.
- Open the browser’s Developer Tools
- Navigate to the "Elements" tab to inspect the page's HTML and CSS.
- Select an icon element.
- In the "Styles" pane, look for the mask-image property within the applied CSS rules.
- AC1: Confirm that the mask-image property is present and applied to the icon elements.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T374145#10220385 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T374145#10248980 |
