Implementation of the lucide icon library for Slint.
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");
}
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;
}
For a complete list of available icons, visit the Lucide Icons website.
To use an icon in Slint:
- Find your desired icon (e.g.,
a-arrow-down
) - Click Copy Component Name to get the PascalCase name (e.g.,
AArrowDown
) - Append
Icon
to the component name:AArrowDownIcon
Example:
import { AArrowDownIcon } from "@lucide";
AArrowDownIcon { }
This project is licensed under the MIT License, while Lucide is licensed under the ISC License.
See LICENSE for more details.