Skip to content

cnlancehu/lucide-slint

Repository files navigation

Crates.io

crates.io · Documentation

Lucide Slint

Implementation of the lucide icon library for Slint.

Installation

In an existing Slint project, run the following command to add lucide-slint as a build dependency:

cargo add lucide-slint --build

Add the following to your build.rs file to import lucide-slint as a Slint library:

use std::{collections::HashMap, path::PathBuf};

fn main() {
    let library = HashMap::from([(
        "lucide".to_string(),
        PathBuf::from(lucide_slint::get_slint_file_path().to_string()),
    )]);
    let config = slint_build::CompilerConfiguration::new().with_library_paths(library);

    // Specify your Slint code entry here
    slint_build::compile_with_config("ui/main.slint", config).expect("Slint build failed");
}

Usage

Then you can use lucide icons in your Slint files like this:

import { PlayIcon } from "@lucide";

export component App inherits Window {
    VerticalBox {
        PlayIcon {
            size: 24px;
            colorize: #fff;
        }
    }
}

The Icon component inherits an Image element, so you can set properties like vertical-tiling, width, etc.

import { FlowerIcon } from "@lucide";

FlowerIcon {
    size: 36px;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    vertical-tiling: round;
    horizontal-tiling: round;
}

Or if you just want to use the raw image data, you can access the icon via Icons:

import { Icons } from "@lucide";

Button {
    text: "Back";
    icon: Icons.ArrowLeftIcon;
    colorize-icon: true;
}

// equivalent to
Button {
    text: "Back";
    icon: @image-url("icons/arrow-left.svg"); // The path is actually relative to the lucide-slint package, use `Icons.ArrowLeftIcon` instead.
    colorize-icon: true;
}

Available Icons

For a complete list of available icons, visit the Lucide Icons website.

To use an icon in Slint:

  1. Find your desired icon (e.g., a-arrow-down)
  2. Click Copy Component Name to get the PascalCase name (e.g., AArrowDown) Copy Component Name
  3. Append Icon to the component name: AArrowDownIcon

Example:

import { AArrowDownIcon } from "@lucide";

AArrowDownIcon { }

License

This project is licensed under the MIT License, while Lucide is licensed under the ISC License.

See LICENSE for more details.

About

Implementation of the lucide icon library for Slint.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published