Use single colour-agnostic optimised icon set

Created on 30 July 2023, over 1 year ago
Updated 31 July 2023, over 1 year ago

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 🐛 User icon in light mode empty Fixed ), 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

📌 Task
Status

Active

Version

2.0

Component

Code

Created by

🇦🇺Australia elgandoz Canberra

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024