Implement responsive UI icons

[oliverschuerch]

In the future, our design system will not only provide the current 900+ icons (one size), but also a much smaller set of responsive UI icons.

We had a discussion about this and specified how and also when to do this.
Below is the discussion output.

---

How to handle masking/clipping, without svg mask and or clip-path elements?
Everything is one path

How to structure the icons?
every icon size is defined as individual icon
icon-x-16.svg
icon-x-24.svg
...

Where to store the icons?
Censhare, separated from the current icons

Where to store the generated sprite image?
Selfhosted is preferred

How to use those icons?
post-icon is the preferred

Implementation priorisation?
Must have for cargo

Tasks to reach the goal:

Tasks

Beta Give feedback

1. Cleanup icons so they are correctly positioned on its viewbox (design)
2. Setup censhare storage (design/dev external)
3. Update download and processing procedure, output a single sprite.svg file (dev)
4. Update post-icon component, so it can show both, the one-size and also the responsive icons (dev)
5. Update @swisspost/design-system-icons package documentation
6. Update post-icon component documentation
7. Update post-icon component testing

Rough estimation for the DEV tasks:
+/- 2-3 weeks

Current conclusion:

• Implement (5-15) static cargo specific icons in the components, where they are needed (as mask-image in CSS).
• Work on an automized solution as outlined above, earliest starting march 2025.