Load symbolic SVG icons from custom directory.

[uiriansan]

Hey, there!

I have a question regarding the use of symbolic SVG icons:

Is it possible to specify a custom directory to load the icons from? I am currently loading them from /usr/share/pixmaps/ and while that works, it would be great to have every file related to my project in one place.

Yes, I know about Svg.set_from_file(), but I really want to change the icons' color using CSS.

[uiriansan]

Never mind, figured it out:

# main.py:

import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk

import json
from loguru import logger
from fabric import Application
from fabric.hyprland.service import Hyprland
from fabric.utils import get_relative_path
from modules.status_bar import StatusBar

MAIN_MONITOR_ID = 1

if __name__ == "__main__":
    icon_theme = Gtk.IconTheme.get_default()

    icons_dir = get_relative_path("./assets/icons/")
    icon_theme.append_search_path(icons_dir)

    status_bars = []
    
    monitors = json.loads(Hyprland.send_command("j/monitors").reply)
    for monitor in monitors:
        status_bar = StatusBar(monitor["id"], MAIN_MONITOR_ID)
        status_bars.append(status_bar)

        logger.info(
            f"Added `status-bar` for monitor {monitor['id']} ({monitor['name']})."
        )

    app = Application("status-bar", *status_bars)
    app.set_stylesheet_from_file(get_relative_path("./styles/global.css"))
    app.run()

# modules/status_bar.py:
...
Button(
    image=Image(icon_name="arch-symbolic", icon_size=20),
    style_classes="arch-icon",
)
...

/* styles/global.css */

* {
    all: unset;
    -gtk-icon-style: symbolic;
}

.arch-icon image {
    color: white;
    transition: color .5s, -gtk-icon-transform .5s;
    -gtk-icon-transform: scale(.7);
}

.arch-icon:hover image {
    color: red;
    -gtk-icon-transform: scale(1);
}

.
├── assets
│   └── icons
│       └── arch-symbolic.svg
├── modules
│   ├── __init__.py
│   └── status_bar.py
├── styles
│   └── global.css
└── main.py

Might be helpful to someone else in the future.

Reference -> Gtk.IconTheme.append_search_path()

[its-darsh]

Also, You can style the Svg widget through its style property, however it is a bit limited since you can't change the color of the icons anywhere out of the widget's parameters.

I might add the extra functionality to change the color of the SVG's path by the value declared in the CSS file.