Add support for other icon formats

[lstocchi]

Is your enhancement related to a problem? Please describe

https://github.com/containers/podman-desktop/pull/3131 enables extensions to contribute with custom icons. The problem is that the only format PD supports right now it's woff2 which doesn't work well with complex image. PD should handle other formats or provide a way to render complex icons

Describe the solution you'd like

PD should handle other formats or provide a way to render complex icons

Describe alternatives you've considered

No response

Additional context

No response

[benoitf]

@lstocchi which format ? woff, woff2 and ttf are the only one in the list. And I thought woff2 was the latest standard.

[lstocchi]

@benoitf i don't know yet. i didn't have time to look for an alternative. If woff, woff2, ttf don't support colored icon we need to provide an alternative to extension that wants to contribute. The kind icon is a good example to find a solution for.

If it's not possible to achieve a good result with those formats, we should handle this use case in a different way. Maybe accepting a svg image instead of an icon

[benoitf]

AFAIK they should not be coloured, as it doesn't work well across a consistent UI

For example if status bar is full of icons being all with random colours, and then handling light or dark theme, it comes quickly to something not looking great.

[lstocchi]

Ah i thought that the point of the customization was to provide a way to add like a small logo, so it was obvious that it was a kind container. By looking at the image below it's not clear that it's related to kind. Or is this what you were expecting?

[benoitf]

@lstocchi I think we might have the same problem spotted by @deboer-tim

your icon looks using italic <i class="{icon}" aria-hidden="true"></i> and it should instead use <span class="{icon} (not saying it'll fix all problems but it should looks better)

[afbjorklund]

handling light or dark theme

is there a light theme available ? I could only see it for the web site, but all the screenshots were still dark even on light

EDIT: seems like it is still pending

• https://github.com/containers/podman-desktop/issues/576

[benoitf]

@afbjorklund it's not there but framework allow us to do it and users are asking for it so at some point we need to work on it

[deboer-tim]

Responding to previous (non-light mode) thread: There are places where we want to use a proper colored logo, like extensions on the left nav or the Settings > Resources page, but as Florent said I think the intention in places like here and the status bar is that it's monochromatic and can fit into our existing UI without standing out too much.

[lstocchi]

Closing it as not needed anymore.

[afbjorklund]

Could still be useful to drop some hints, on how to successfully convert a svg image into a woff2 font.

I was able to remove all the colors and create a monochrome image, but failed during the fontcustom.

---

EDIT: got it figured out, thanks to https://github.com/nfroidure/gulp-iconfont - it needs to be 500 px and path merged

Then https://github.com/FontCustom/fontcustom handles the rest, including the preview and the woff2 conversion

And of course Inkscape does the SVG editing in the first place, including scaling up the size of the input svg image