@peachy/plugin-resources

Allow you to import files as resources.

Usage

You will need to have peachy installed.

Then, you need to create a peachy.config.ts file in the root of your project.

// peachy.config.ts

import { defineConfig } from "@peachy/core";

export default defineConfig({
  package: {
    name: "dev.peachy.Example"
  },
  resources: {
    icons: true,
  }
});

TODO: enable this by default, skip generation if there's no resources/icons

In your code, make sure to initialize your code to use the given name in your peachy.config.ts file.

import Gtk from "gi://Gtk?version=4.0";

const app = new Gtk.Application({
  // IMPORTANT: match this with the one in `peachy.config.ts`
  application_id: "dev.peachy.Example",
  flags: Gtk.ApplicationFlags.FLAGS_NONE,
});

/// ...

app.run([]);

Then you can start importing resources/icons.

Importing Files

When you need to import a resource, you can directly import them. Currently, only SVG files are supported.

import Gtk from "gi://Gtk?version=4.0";

import File from "./path/to/file.svg";

const image = new Gtk.Image({
  resource: File,
});

You can use the imported resource anywhere that accepts a Gio.Resource like Gtk.Image and Gtk.Picture.

Icons

Icons in data/icons folder will be automatically configured and registered as Themed Icons, so you can use them just by referencing their name.

1. Put your icons in data/icons folder.

data/icons/right-symbolic.svg
data/icons/left-symbolic.svg

2. Use them in your code.

import Gtk from "gi://Gtk?version=4.0";

const button = new Gtk.Button({
  icon_name: "right-symbolic",
});