Slint Kit Documentation

Icônes

Icône pour Slint

KitIcon · Slint Kit 0.3.0

Icône vectorielle originale choisie dans un ensemble typé.

Icône vectorielle originale choisie dans un ensemble typé.
Application native de l’exemple ci-dessous.

Essayer le composant

Télécharger le projet complet, le décompresser et lancer cargo run --locked dans son dossier. Rust 1.92+ ; Slint Kit 0.3.0 depuis crates.io. Vous pouvez aussi copier les quatre fichiers ci-dessous.

Lancez l’application pour observer cette composition et redimensionner sa fenêtre.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { IconKind, KitIcon, KitTheme, KitThemes } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitIcon example";
    preferred-width: 360px;
    preferred-height: 160px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Icon"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        HorizontalLayout { alignment: start; spacing: 24px; KitIcon { kind: IconKind.check; ink: root.theme.accent; } KitIcon { kind: IconKind.search; ink: root.theme.text-primary; } KitIcon { kind: IconKind.warning; ink: root.theme.warning; } }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-icon-example"
version = "0.1.0"
edition = "2024"
rust-version = "1.92"
license = "GPL-3.0-or-later"
publish = false

[dependencies]
slint-kit = "=0.3.0"
slint = { version = "=1.18.1", default-features = false, features = ["std", "compat-1-18", "backend-winit", "renderer-skia", "accessibility"] }

[build-dependencies]
slint-kit-build = "=0.3.0"

[workspace]

build.rs

fn main() {
    slint_kit_build::compile("ui/app.slint").expect("compile component example");
}

Fichiers : Cargo.toml · build.rs · ui/app.slint · src/main.rs

Définissez kind: IconKind.check et ink à partir de la couleur sémantique du thème. Pour une action sans texte, utilisez KitIconButton avec un nom accessible.

Les tracés partagent une grille de 16 unités et se redimensionnent comme un Path Slint. L’icône seule ne fournit ni interaction ni nom d’action.

Voir le code source ↗

Composition visuelle

Le fichier ci-dessous produit la capture. Pour les composants pilotés par un contrôleur, il montre l’état affiché sans fournir le branchement Rust. Créer un projet.

Afficher le fichier de la capture
Icône vectorielle originale choisie dans un ensemble typé.
Capture native du même exemple, moteur Skia.
// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// SPDX-License-Identifier: GPL-3.0-or-later
import { IconKind, KitIcon, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitIcon — exemple";
    preferred-width: 360px;
    preferred-height: 160px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> status;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Icône"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        HorizontalLayout { alignment: start; spacing: 24px; KitIcon { kind: IconKind.check; ink: root.theme.accent; } KitIcon { kind: IconKind.search; ink: root.theme.text-primary; } KitIcon { kind: IconKind.warning; ink: root.theme.warning; } }
        if root.status != "": Text { text: root.status; color: root.theme.text-secondary; font-size: 12px * root.theme.text-scale; wrap: word-wrap; }
    }
}

Télécharger cet exemple

API publique

Hérite de Path.

Propriétés

Nom Type Sens
kind IconKind in
ink color in

Types et variantes

Type Déclaration
enum IconKind chevron-down, chevron-left, chevron-right, close, eye, eye-hidden, search, check, minus, plus, arrow-up-right, warning, chevron-up, bell, menu, information, article, home, grid, copy, upload, download, heart, cart, clock, settings, file, trash

Voir aussi