How to add an icon to silx#

Icons are stored in the src/silx/resources/gui/icons folder in both SVG and PNG format.

There are three steps to add an icon:

  1. Create a SVG icon

  2. Export it as a PNG

  3. Add the files to silx

Create a SVG icon#

  • Use inkscape to create a SVG icon with the following constraints:

    • The SVG viewBox should be a 32x32 square

    • There should be no embed images (png or jpeg)

    • No external resources such as fonts should be used: Convert text to paths using inkscape’s “Path/Object to Path” menu.

  • Save the icon as “Optimized SVG” without compression.

  • Patch the SVG file to support dark color theme: In silx, when the dark color theme is active, class="dark" is added to the <svg> opening tag before rendering the icons. The "dark" class can be used to custom the SVG style through a <style> tag, for example:

    • Set fill (default: black) of all SVG primitives:

      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
.dark * {
    fill: #ffffff;
}
</style>
<rect x="3" y="3" width="26" height="26" rx="2"/>
</svg>

    • Set the value of currentColor (default: black) and use it where needed, e.g. for the stroke:

      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
.dark * {
    color: #ffffff;
}
</style>
<rect x="3" y="3" width="26" height="26" rx="2" fill="none" stroke="currentColor" stroke-width="2px"/>
</svg>

Look at SVG icons in src/silx/resources/gui/icons/ for more examples.

Export it as a PNG#

The tools/export_svg.sh script converts SVG files to PNG files with the same name:

tools/export_svg.sh myicon.svg

Make sure that the produced PNG file:

  • has a transparent background

  • has a size of 32x32 pixels

Note

It is also possible to export the SVG file as a PNG file using inkscape’s “File/Export…” menu.

Add the files to silx#