Allow SVGs to be recolored by the menu theme

[m-reisner]

Short Summary

My added icon set are displayed only in black.

Steps to Reproduce the Issue

1. Download the icons from https://fontawesome.com/download.
2. Extract the svg's to /Users/[your Username]/Library/Application Support/kando/icon-themes/.
3. Start kando.app.
4. Use any of the new icons.

Kando Version

2.0.0 Alpha 1

Installation Method

Directly from the main branch

Desktop Environment

macOS

Environment Version

macOS Sequoia 15.4.1

Additional Information

I have configured to use lime green icon color. That works for the default menu, but not for the selected icons from font awesome. Here is a icon i used:

[Schneegans]

Hi there! Thanks for the report. However, this is actually expected behavior. Recoloring of the icons only works for the builtin font-icon themes (simple icons and material symbols).

I see why you may expect other icons to be recolored as well, but this is more difficult: What if your icon was not completely black but contained colored elements? Many application icons you can download from the internet are colorful SVGs. Which part should Kando recolor?

That being said, the new alpha version of Kando does support recoloring of SVGs to a certain degree. You will need to edit the SVG with a text editor. Simply add fill="currentColor" to the path element. I think this should be sufficient in this case...

[m-reisner]

Thank you for your fast reply. I'm thinking about these options:

• Define a "recolor"-color in the settings (mostly black will be right :smiley: ).
• if only one color is used in the svg - just recolor that.
• Add fill="currentColor" when loading the svg.

I think each of this option will help the user to not used to edit the svg. :thumbsup:

btw.: Danke für dieses tolle Projekt. Ich werde es mit MacOS. Windows und hyprland on arch testen.

[LitoMore]

@m-reisner For the Battle.net icon, you can use Simple Icons (Colored) instead.

[Schneegans]

Define a "recolor"-color in the settings (mostly black will be right 😃 ).

Well, the color would be defined by the menu theme used.

if only one color is used in the svg - just recolor that.

This is not that easy to determine. An svg can be very complex. Simply replacing all fill and stroke properties will often break. What about blend modes? What about rgba() values with a transparency?

Add fill="currentColor" when loading the svg.

One could try this. But the limitations mentioned above still hold. So I expect that there will be many SVGs where this will not work properly. The code is about here. So if anybody wants to try this...

Danke für dieses tolle Projekt. Ich werde es mit MacOS. Windows und hyprland on arch testen.

Gerne 😄

[LitoMore]

I have an idea to implement this with CSS Mask. I will draft some code later.

Update:
Here is my related branch: https://github.com/LitoMore/kando/tree/use-css-mask

[Schneegans]

Here is my related branch: https://github.com/LitoMore/kando/tree/use-css-mask

Thanks for testing this! I also thought about this, but some early tests I did showed a pretty bad performance. I tested your branch and this somewhat confirms my suspicion. Scrolling in the icon picker is much more laggy on my end. I would not care too much about the settings dialog but this would also affect menu rendering time...

Here's a performance profile of opening the icon picker and scrolling a bit:

Current	With CSS Masks

Maybe we would need to take a step back, think about what our options are and what we actually want. Maybe this helps.

What do we want?

• Coloring of icons.
  • Which icons do we want to recolor? Font icons? SVG icons? Raster icons? Currently, font icons are always recolored, SVG icons only if they have fill=currentColor, and raster icons are never recolored. For font icons recoloring is cheap, for SVG icons it depends on the technique, for raster icons only CSS masks could be used which is rather slow.
  • With what color? I think that it's a good idea if the color is given by the menu theme. So that icons which should be recolored are recolored similar to the build-in font icon themes.
• Scaling of icons. This is actually another topic and isn't limited to a specific item type. Maybe it would be best to have a slider in the icon picker which allows adjusting the icon scale for every menu item. Currently each menu item stores an icon and an icon-theme. We could just add an icon-scale for that.

We could also start thinking about a more versatile icon-theme system. An icon theme could be a directory with a theme.json metadata file which contains some information, like for the menu themes. This could then maybe define whether icons from this theme should be recolored, and if so, via which method...

What do you think?

[LitoMore]

For performance issues, we can load those files from the local file system. You can try my implementation for Simple Icons here: https://litomore.github.io/si-website.

[Schneegans]

But then we would need to include all icons as SVGs, right? Would be interesting to compare this performance-wise with the icon font.

[LitoMore]

And it might be a performance issue from the react-window. I will implement it using react-virtuoso to see its performance.