[Plan] Move to SVG fragments (blocked by FF esr) [#3205375]

Problem/Motivation

Move from inlining SVGs to CSS to use fragments. This would save around 100kb in size of CSS.
The reason why we inline SVGs is that FF did not support it until recently. It's now supported from FF 84+

Steps to reproduce

1. enable format: 'fragment', in webpack.config.js
2. build frontend: npm run build

Proposed resolution

Use fragments instead of inlining SVGs

Remaining tasks

Decide to use fragments or not

User interface changes

No icons will be displayed in FF < 84

API changes

–

Data model changes

–

Comment	File	Size	Author
#3	build-without-fragment.png	540.14 KB	sqndr
#3	build-with-fragment.png	541.42 KB	sqndr

Issue fork gin-3205375

Show commands

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

Add & fetch this issue fork’s repository

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

Add & fetch this issue fork’s repository

3205375-fragments changes, plain diff MR !65
Check out this branch for the first time

Check out existing branch, if you already have it locally

1 hidden branch

3205375-plan-move-to

changes, plain diff MR !64

Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

24 March 2021 at 12:44

saschaeggi created an issue. See original summary.

Comment #2

2 July 2021 at 08:17

sqndr made their first commit to this issue’s fork.

Comment #3

sqndr commented 2 July 2021 at 08:20

Status	File	Size
new	build-with-fragment.png	541.42 KB
new	build-without-fragment.png	540.14 KB

It does save about 100kb. Attached are two screenshots of the builds.

Comment #4

sqndr commented 2 July 2021 at 08:20

Status:

Active

» Needs review

Comment #5

saschaeggi

he/him

commented 2 July 2021 at 11:12

Status:

Needs review

» Postponed

This was initially blocked by an Firefox issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=1535822
https://bugzilla.mozilla.org/show_bug.cgi?id=1486252

Looking at Firefox 78.11.0esr today, it looks like this has not landed in Firefox ESR yet. So moving this to Postponed until Firefox has released an ESR which addresses this issue.

Comment #6

saschaeggi

he/him

commented 13 September 2021 at 14:32

Title:

[Plan] Move to SVG fragments

» [Plan] Move to SVG fragments (blocked by FF esr)

Revisiting this today again in 78.14.0esr we're still not able to switch to fragments, as Firefox still hasn't pushed this fix to the ESR release.

Comment #7

10 November 2021 at 19:53

saschaeggi opened merge request !64

Comment #8

10 November 2021 at 20:00

saschaeggi closed merge request !64

Comment #9

10 November 2021 at 20:03

saschaeggi opened merge request !65

Comment #10

saschaeggi

he/him

commented 10 November 2021 at 20:16

Status:

Postponed

» Needs review

Update: Firefox 91esr+ now supports SVG fragments!
I'd vote to move this forward ASAP – but this is a breaking change for sure – as it will break the hole site for Firefox ESR users below Version 91 (no icons will be shown at all). But on the other hand we'd save a whopping 114kb of CSS.
So I'd like to hear other voices on this.