Improve icon hosting and usage

[oliverschuerch]

Description

With the integration of the new icon set for UI icons, we've updated our <post-icon> component and also implemented the scss mixin post-icon in the design-system-styles package to use all of our icons (incl. Post and UI icons) as mask-images.

By default, we load the icons from the npm https://unpkg.com service (which is performance wise not a really good solution) or alternatively allow projects to host the icons by themselve (which is the recommended way at the moment).

We also have a file in our styles package, which defines all of our icons as data:image strings, which is used together with the older icon mixin and some sass functions to use the icons directly in the styles package.

Downside:

• With every icon we use somewhere within our style files, the output files grow.
• Every icon used with the icon mixin will be integrated as often as we used the mixin in our source files.
  e.g. We use icon "A" on two different lines and icon "B" is integrated with three different colors.
  Icon "A" is defined (the exact same way) in the output file twice, icon "B" is defined in the output trice with just some different colors attributes in its definition.

$${\color{red}!!!}$$ I was able to find 91 data:image definitions (uncompressed size ~33KB) in our cargo-external.css file, with some icons being declared the exact same way up to 12 times. $${\color{red}!!!}$$

Solutions

Now, a much better solution would be, to provide the icons from our own cdn (https://fonts.post.ch) and make this the default and recommended way to use the icons (instead of self-hosting them, which still needs to be an available option).

To do so, we would need to do perform some changes in our repo:

• Replace all the usages of the current icon mixin in our packages with the new post-icon mixin, to ensure, we never use an icon, which is inlined in our styles package.
• After this, we could savely remove the $svg-icon-map, some related sass mixins and functions and also cleanup the gulpfile in the package design-system-styles.
• Find a way how icons can be pushed to or pulled from our cdn repo (whenever a change in the package design-system-icons happens).

Conclusion

We can not only improve the way our icons can be used by projects (cdn as default and recommended integration way), but also align the way icons are going to be integrated through the <post-icon> web-component and within our style files (mask-image with a url() value which points to the same source file and therefore make it browser cachable), we'd also save some KB in our output style files and ensure, these files will not grow with every icon we use somewhere.

What's your opinion? Please share your thoughts below.

[gfellerph]

@oliverschuerch what is the post-icon mixin doing differently? Can you add comparison?