Implement icons mirroring with CSS

[thibaudcolas]

Fixes #8127. This implements icons mirroring with the simplest setup, and does a bit of cleanup so said setup is easily previewable in our styleguide.

Follow-up

I wanted to implement a better approach but there are compatibility issues between our "SVG symbols sprite" approach to icons and how directionality is passed through shadow DOM in HTML. As such, there are two icons left outstanding:

• tasks, where the "list bullets" and "list text lines" should be reversed.
• list-ol, also where the "list bullets" and "list text lines" should be reversed.

I was hoping we could create those effects with just CSS, but it seems like we’d need separate alternative icons and a way to switch. I’ve left those icons as-is, so I can create a follow-up issue and hopefully we can find a creative solution.

It’d also be nice if people customizing Wagtail could add their own icons, with RTL support, without having to write CSS. Instead find a way to define the icon needs mirroring directly in the markup. But that’s running into the same issues.

Testing this

To test this, the simplest way is to view the styleguide page in Arabic and make sure all icons are mirrored as appropriate. Here is the v5.2 styleguide in arabic for reference.

I would also recommend to manually edit the "rtl icons" style declaration in DevTools to add an outline as debug styles. Makes it much simpler to check which icons are reversed.

Please check the following:

• Do the tests still pass?[^1]
• Does the code comply with the style guide?
• [ ] For Python changes: Have you added tests to cover the new/fixed behaviour?
• For front-end changes: Did you test on all of Wagtail’s supported environments?[^2]
  • Please list the exact browser and operating system versions you tested: Safari 17, Chrome 121, Firefox 121 on macOS 14
  • Please list which assistive technologies [^3] you tested: None
• [ ] For new features: Has the documentation been updated accordingly?

[squash-labs]

Manage this branch in Squash

Test this branch here: https://thibaudcolas8127-rtl-mirroring-gdgbh.squash.io

[thibaudcolas]

Noticed this on the sliders icon. This isn’t that big of a problem, just done for consistency.

[laymonage]

Wondered whether we can use a generic CSS class and apply it to the files individually instead of explicitly including each directional icon here, turns out we need to apply the styles to the paths instead, and also use transform-origin since the transform will be done relative to the viewBox. Done in #11466