Refactoring of backend module icons

[typecat]

He have to remove this task, the module bar is outside our scope and will be handle by the UX Initiative team.

According to the mockup the module icons in the module bar should be mono-chome (black-and-white). The icons are fetched from the TYPO3 icons repository which makes it difficult to apply changes without them either being overridden or creating a new version in the icons repository.

Dealing with the icons we also discovered, that they need to be refactored more detailed than just changing the colors. Some icons are used for more purposes than just the module bar (e.g. dashboard,redirects, reports), other icons need to be simplified in the drawing instructions. Currently these are not consistent: outline and blank space vs. stacked shapes and fills.

For proof of concept a hotfix in the Gruntfile.js was implemented, which of course needs to be removed when creating a PR, so that the icons could be changed directly in the Resources/Public/Icons directory of the corresponding extensions.

TODO:

• Create a concept for module icons
• Refactor the icons in the icons repository and create a version for TYPO3 11
• Use new icons version in TYPO3 11 and remove the hotfix (631cb52)

Mockup:

Rachel > finally we handled thing with CSS we don't need anymore to change the icons

[typecat]

Just found out that module group icons are done differently: they use fill="currentColor" instead of a fixed color code. This should be done for module icons as well. This way, the icon color gets automatically inverted without applying an additional inversion filter in CSS.

[typecat]

The hotfix (631cb52) is removed btw, we put a greyscale on the icons instead. This way there would be no color flashing for if a third party module is installed.
The remaining thing to do would be to remove the background in the icon repository.