Problem/Motivation

Currently there are 3 different colour variants of the icon set (light/dark/active). Each icon gets loaded independently. Each icon in non web optimised, containing a lot of non-standard rules from SVG editors (stuff like <!-- Generator: Adobe Illustrator 27.4.1 [...], <defs>[...]</defs> and <clipPath>[...]</clipPath>.

All this makes the icon harder to maintain (see #3377987: User icon in light mode empty), harder to style and heavier to load.

Proposed resolution

  1. Creating a single set of icons with embedded dark-mode support and optimise the SVG code.
  2. Inject the svg icon (optional but easier to style)
  3. Creating a light/dark/modifier class to change the color according to the state
  4. (Optional) To further improve performance, create a svg sprite

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork seeds_toolbar-3377990

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

elgandoz created an issue. See original summary.

elgandoz’s picture

elgandoz commented
Issue summary: View changes
elgandoz’s picture

elgandoz commented
Title: Single colour-agnostic optimised icon set » Use single colour-agnostic optimised icon set
Category: Feature request » Task
yahyaalhamad’s picture

yahyaalhamad
Location Palestine
commented

We are planning to rework the styling and the icons in the future, especially the styling.

elgandoz’s picture

elgandoz commented

Hey @YahyaAlHamad, thanks for the quick reply. Would you be interested if I try to implement the changes I mentioned in this ticket and in #3377986: body class "light" and "dark" may clash with themes with dark mode, #3377992: Implement auto dark mode and #3378032: CSS may use some refactoring?
I just don't want to waste time if something is already baking.