Icons following colors

As breeze is a monochrome icon set the contrast is one of the biggest issues. With Plasma 5.6, the developers solved this problem by applying the system color scheme to the icons. Now the icons use the same color (and contrast) as the text. With this shiny new feature, users can define the colors of the icon set by themselves.

To bring this feature to the user, ALL icons have to have include a style component. Marco Martin added the style stuff with a script but we had a second issue, the file size. In the last release (KF 5.20), the breeze icons need 28 mb of disk size, the applet icons for the widget explorer therefore need way too long to render, … so it was time for a rework.

How does the style stuff work? It follows an SVG standard and you define in the header <defs> area the styled colors and in the body you use in style instead of fill:#f2f2f2 fill:currentColor and define the class=”ColorScheme-Text” which say use the defined Text color from the color scheme.

With the Qt app “SVG Cleaner”, the colored icons were optimized and all monochrome icons were optimized in this way:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"> <defs id="defs3051"> <style type="text/css" id="current-color-scheme"> .ColorScheme-Text { color:#f2f2f2 } </style> </defs> <path style="fill:currentColor;fill-opacity:1;stroke:none" d="M 3 3 L 3 4 L 3 19 L 4 19 L 14 19 L 14 18 L 4 18 L 4 10 L 7 10 L 7 9.9921875 L 7.0078125 10 L 9.0078125 8 L 18 8 L 18 14 L 19 14 L 19 5 L 12.007812 5 L 10.007812 3 L 10 3.0078125 L 10 3 L 4 3 L 3 3 z M 16 14 L 16 16 L 14 16 L 14 17 L 16 17 L 16 19 L 17 19 L 17 17 L 19 17 L 19 16 L 17 16 L 17 14 L 16 14 z " class="ColorScheme-Text" /> </svg>

Remove ⅔ of the code

Make a template file with only the needed elements, SVG header, style element and the path section was removed with the individual file input. As I’m not a developer it was done by hand. So it took a while but now all monochrome icons can be styled according to the color scheme and the disk size is now 9,4 mb instead of 28,0 mb for the 6.183 breeze icons.

As the icons got rid of unnecessary code the rendering should now be way faster, and with the style stuff I hope to find users to play with it and will find nice solutions for our awesome Plasma desktop.

Open Issue

All in all there is one (big) issue: The style stuff works for now only for Plasma and QML apps, but I hope that in the future we can have this feature for the (QWidget) KDE applications, too.

So if you are an icon designer, bring this shiny new functionality to your icon set and the devs will bring the functionality to the KDE applications.