Custom Resources

elementary.io Blog Human Interface Guidelines Contributor Guide
Search…
Custom Resources
You can include additional resources with your app like icons or CSS files using GResource. When using GResource, these files will be compiled into your app's binary, ensuring they're available and loaded when your app launches. Regardless of which type of resource you'd like to include, you'll need to create a gresource.xml file and include it in your build system. Make sure to start with a Gtk.Application as described in the previous section​
In the data directory, create a new file called gresource.xml with the following contents:
1
<?xml version="1.0" encoding="UTF-8"?>
2
<gresources>
3
  <gresource prefix="/com/github/yourusername/yourrepositoryname">
4
  </gresource>
5
</gresources>
Copied!
For now, this resource doesn't include any files. We'll come back to that in the following sections. Make sure to update the resource prefix to match your app's RDNN.
Now add the following lines to meson.build, somewhere before the executable step:
1
# Include the GNOME module
2
gnome = import('gnome')
3
​
4
# Tell meson where to find our resources file and to compile it as a GResource
5
gresource = gnome.compile_resources(
6
    'gresource',
7
    'data' / 'gresource.xml',
8
    source_dir: 'data'
9
)
Copied!
and finally, add the gresource to your executable step:
1
executable(
2
    meson.project_name(),
3
    gresource,
4
    'src/Application.vala',
5
    dependencies: [
6
        dependency('gtk+-3.0')
7
    ],
8
    install: true
9
)
Copied!
Now that we have a gresource.xml file and have included it in the build system, we can add files and reference them in our app.
Icons
As we saw in the section on GLib.Action, GTK has a baked-in set of icon sizes defined under the namespace Gtk.IconSize. When creating icons, it is important to know which of these sizes will be used and to design and hint the icon at that size. For more information about creating and hinting icons, check out the Human Interface Guidelines. Add your custom icon to the data directory, and then update your gresource.xml file to reference it:
1
<?xml version="1.0" encoding="UTF-8"?>
2
<gresources>
3
  <gresource prefix="/com/github/yourusername/yourrepositoryname">
4
    <file compressed="true" preprocess="xml-stripblanks">custom-icon.svg</file>
5
  </gresource>
6
</gresources>
Copied!
If you want to use the same icon name in multiple sizes in your app, you can alias the icon to paths in hicolor and GTK will automatically load the correct version when its size is referenced:
1
<?xml version="1.0" encoding="UTF-8"?>
2
<gresources>
3
  <gresource prefix="/com/github/yourusername/yourrepositoryname">
4
    <file alias="24x24/actions/custom-icon.svg" compressed="true" preprocess="xml-stripblanks">custom-icon-24.svg</file>
5
    <file alias="[email protected]/actions/custom-icon.svg" compressed="true" preprocess="xml-stripblanks">custom-icon-24.svg</file>
6
    <file alias="32x32/actions/custom-icon.svg" compressed="true" preprocess="xml-stripblanks">custom-icon-32.svg</file>
7
    <file alias="[email protected]/actions/custom-icon.svg" compressed="true" preprocess="xml-stripblanks">custom-icon-32.svg</file>
8
  </gresource>
9
</gresources>
Copied!
Now we can add the GResource path to the system's built-in icon theme in the Application class' activate () function. This will let us reference the icon name without using long paths, and automatically handle icon sizing as previously mentioned Again, don't forget to use the same RDNN'd path that was defined in gresource.xml:
1
protected override void activate () {
2
    Gtk.IconTheme.get_default ().add_resource_path ("com/github/yourusername/yourrepositoryname");
3
​
4
    var main_window = new Gtk.ApplicationWindow (this);
5
    main_window.show_all ();
6
}
Copied!
The last step is to create a Gtk.Image or Gtk.Button using your custom icon and add it to the main window:
1
protected override void activate () {
2
    Gtk.IconTheme.get_default ().add_resource_path ("/com/github/yourusername/yourrepositoryname");
3
​
4
    // This will create an image with an icon size of 32px
5
    var image = new Gtk.Image.from_icon_name ("custom-icon", Gtk.IconSize.DND);
6
​
7
    // This will create a button with an icon size of 24px
8
    var button = new Gtk.Button.from_icon_name ("custom-icon", Gtk.IconSize.LARGE_TOOLBAR);
9
​
10
    var grid = new Gtk.Grid () {
11
        column_spacing = 12
12
    };
13
    grid.add (image);
14
    grid.add (button);
15
​
16
    var main_window = new Gtk.ApplicationWindow (this);
17
    main_window.show_all ();
18
}
Copied!
Last modified 3mo ago
Export as PDF
Copy link
Contents
Icons