### Configure build.rs for Lucide-Slint

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/MANIFEST.md

Example configuration for the build.rs file to integrate lucide-slint. This setup is crucial for the build process.

```rust
fn main() {
    // Example configuration for build.rs
    // This might involve setting up build scripts or linking libraries.
    // Specifics depend on the project's build requirements.
    println!("cargo:rerun-if-changed=build.rs");
}

```

--------------------------------

### Example Path Data from process_icons_svg

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

Provides an example of the `PathElem` struct, detailing the extracted SVG path commands and viewbox properties.

```rust
vec![
    PathElem {
        viewbox_x: 0.0,
        viewbox_y: 0.0,
        viewbox_width: 24.0,
        viewbox_height: 24.0,
        commands: "M 12 5 L 19 12 L 12 19 M 12 19 L 5 12",
        has_fill: false,
    },
]
```

--------------------------------

### Complete Slint Integration Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

This example shows how to import and use Icon, IconDisplay, and IconSet from Lucide within a Slint application. It demonstrates dynamic icon selection and styling in a navigation bar component.

```slint
import { Icon, IconDisplay, IconSet } from "@lucide";

export component NavigationBar {
    in property <Icon> current-icon;
    in property <brush> active-color: #3b82f6;
    in property <brush> inactive-color: #9ca3af;
    
    HorizontalLayout {
        spacing: 8px;
        
        IconDisplay {
            icon: IconSet.Home;
            stroke: current-icon == IconSet.Home ? active-color : inactive-color;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.Search;
            stroke: current-icon == IconSet.Search ? active-color : inactive-color;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.Settings;
            stroke: current-icon == IconSet.Settings ? active-color : inactive-color;
            size: 24px;
        }
    }
}

export component App {
    NavigationBar {
        current-icon: IconSet.Home;
    }
}
```

--------------------------------

### Basic Slint Component Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/build-integration.md

A simple Slint component demonstrating an IconButton with an IconDisplay from the @lucide library. This example shows how to import and use Slint components and icons.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component IconButton {
    out property <bool> pressed;
    
    Rectangle {
        width: 48px;
        height: 48px;
        background: #f0f0f0;
        
        IconDisplay {
            icon: IconSet.Download;
            size: 24px;
            stroke: #333;
        }
    }
}
```

--------------------------------

### Cargo.toml Build Dependency Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/build-integration.md

Example of how lucide-slint is added to the [build-dependencies] section in Cargo.toml.

```toml
[build-dependencies]
lucide-slint = "1.21.0"
```

--------------------------------

### Slint Icon Analyzer Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/types-reference.md

Demonstrates how to access and use PathElem information within a Slint component. This example shows how to get the number of paths and a descriptive string based on the path count.

```slint
import { Icon, IconDisplay, IconSet } from "@lucide";

// Access path information
export component IconAnalyzer {
    property <Icon> icon: IconSet.Activity;
    
    out property <int> path-count: icon.paths.length;
    out property <string> path-description: 
        icon.paths.length == 1 
            ? "Single path icon" 
            : "Multi-path icon";
}
```

--------------------------------

### Styled Icon Setup

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/examples.md

Shows how to apply custom styling to an icon, including stroke color, width, and size.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component App {
    IconDisplay {
        icon: IconSet.Heart;
        stroke: #ef4444;
        stroke-width: 1.5;
        size: 32px;
    }
}
```

--------------------------------

### Get and Register Lucide Slint Library Path

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

This example demonstrates how to obtain the path to the lucide Slint library using `lucide_slint::lib()` and register it with the Slint compiler configuration. It's intended for use in Rust build scripts (`build.rs`).

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

fn main() {
    // Get the path to the lucide Slint library
    let lucide_lib_path = PathBuf::from(lucide_slint::lib());
    
    // Register with the Slint compiler
    let library = HashMap::from([
        ("lucide".to_string(),
         lucide_lib_path),
    ]);
    
    let config = slint_build::CompilerConfiguration::new()
        .with_library_paths(library);

    // Compile Slint code that imports from @lucide
    slint_build::compile_with_config("ui/main.slint", config)
        .expect("Slint build failed");
}
```

--------------------------------

### PascalCase Conversion Examples

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

Demonstrates the conversion of various kebab-case and snake_case strings to PascalCase, showing how icon names are standardized.

```text
Input | Output
--|--
`a-arrow-down` | `AArrowDown`
`arrow_up_right` | `ArrowUpRight`
`file-text-2` | `FileText2`
`x-circle` | `XCircle`
`checkCircle2` | `CheckCircle2`
```

--------------------------------

### Size Examples

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Illustrates the effect of different `size` property values on the IconDisplay component, ranging from small to large.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component SizeDemo {
    HorizontalLayout {
        spacing: 16px;
        
        IconDisplay {
            icon: IconSet.Star;
            size: 12px;
        }
        
        IconDisplay {
            icon: IconSet.Star;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.Star;
            size: 48px;
        }
        
        IconDisplay {
            icon: IconSet.Star;
            size: 96px;
        }
    }
}
```

--------------------------------

### Run SVG Optimizer

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

Execute the SVGO optimizer as a subprocess. Use `pnpm.cmd start` on Windows.

```bash
pnpm start  # Windows: pnpm.cmd start
```

--------------------------------

### Slint Icon Usage Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

Demonstrates how to import and use the Icon, IconDisplay, and IconSet components to create a custom icon button. The example shows how to assign an icon from IconSet to a property and display it.

```slint
import { Icon, IconDisplay, IconSet } from "@lucide";

export component MyIconButton {
    in property <Icon> icon: IconSet.CheckCircle2;
    
    IconDisplay {
        icon: icon;
        stroke: #22c55e;
        size: 20px;
    }
}

// Usage:
MyIconButton {
    icon: IconSet.AlertCircle;
}
```

--------------------------------

### Fractional Stroke Width Examples

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Demonstrates the use of fractional values for `stroke-width` to achieve precise control over stroke thickness.

```slint
IconDisplay {
    icon: IconSet.ArrowRight;
    stroke-width: 1.5;  // 1.5 pixels
}

IconDisplay {
    icon: IconSet.ArrowRight;
    stroke-width: 2.25; // 2.25 pixels
}
```

--------------------------------

### Color Examples

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Provides examples of setting the `stroke` property using various color formats including hex, RGB, named colors, and transparent.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component ColorDemo {
    VerticalLayout {
        spacing: 16px;
        
        // Hex color
        IconDisplay {
            icon: IconSet.Heart;
            stroke: #ef4444;
            size: 32px;
        }
        
        // RGB color
        IconDisplay {
            icon: IconSet.Heart;
            stroke: rgb(239, 68, 68);
            size: 32px;
        }
        
        // Named color
        IconDisplay {
            icon: IconSet.Heart;
            stroke: red;
            size: 32px;
        }
        
        // Transparent
        IconDisplay {
            icon: IconSet.Heart;
            stroke: transparent;
            size: 32px;
        }
    }
}
```

--------------------------------

### Gradient Fill Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Shows how to apply a linear gradient to the `stroke-fill` property for a more dynamic icon appearance.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component GradientFill {
    IconDisplay {
        icon: IconSet.Heart;
        stroke: #ef4444;
        stroke-fill: @linear-gradient(
            45deg;
            #fecaca,
            #fca5a5
        );
        size: 48px;
    }
}
```

--------------------------------

### Slint IconSet Usage Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

Illustrates how to use the IconSet global and IconDisplay component to render multiple icons within a Slint VerticalLayout. This example shows displaying home, settings, and logout icons.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Dashboard {
    VerticalLayout {
        IconDisplay {
            icon: IconSet.Home;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.Settings;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.LogOut;
            size: 24px;
        }
    }
}
```

--------------------------------

### Generate Command Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

This command initiates the process of converting all Lucide SVG icons to Slint format and generates the 'lib.slint' file.

```bash
cargo run -- generate
```

--------------------------------

### Gradient Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Shows how to apply a linear gradient to the `stroke` property of an IconDisplay component.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component GradientIcon {
    IconDisplay {
        icon: IconSet.Zap;
        stroke: @linear-gradient(90deg; #fbbf24, #f97316);
        size: 48px;
    }
}
```

--------------------------------

### Example Output for read_icon_names

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

Illustrates the expected format of sorted and deduplicated icon names returned by the `read_icon_names` function.

```rust
vec![
    "a-arrow-down",
    "activity",
    "alert-circle",
    "arrow-up-right",
    // ... hundreds more
]
```

--------------------------------

### Mapping Lucide Icon Names to Slint

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/build-integration.md

Examples showing how to use PascalCase names in Slint's IconSet for various Lucide icons.

```slint
IconSet.AlertCircle      // from "alert-circle"
IconSet.ArrowUpRight     // from "arrow-up-right"
IconSet.FileText2        // from "file-text-2"
```

--------------------------------

### C++ Integration with CMake

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/MANIFEST.md

An example CMake configuration for integrating lucide-slint with C++ projects. This demonstrates how to link the library.

```cmake
cmake_minimum_required(VERSION 3.10)
project(lucide_slint_cpp_example)

# Add lucide-slint as a dependency
# This assumes lucide-slint is available as a CMake target or can be found via find_package
# find_package(lucide-slint REQUIRED)
# target_link_libraries(${PROJECT_NAME} PRIVATE lucide-slint::lucide-slint)

add_executable(lucide_slint_cpp_example main.cpp)

# Placeholder for actual linking, replace with actual lucide-slint target
# target_link_libraries(lucide_slint_cpp_example PRIVATE some_lucide_slint_library)

```

--------------------------------

### Filled Icon Example

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Demonstrates how to use the `stroke-fill` property to create a filled version of an icon. The default is transparent.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component FilledIcons {
    HorizontalLayout {
        spacing: 16px;
        
        // Outline (default)
        IconDisplay {
            icon: IconSet.TreeDeciduous;
            stroke: #7faf6a;
            size: 32px;
        }
        
        // Filled
        IconDisplay {
            icon: IconSet.TreeDeciduous;
            stroke: #7faf6a;
            stroke-fill: #a1c88f;
            size: 32px;
        }
    }
}
```

--------------------------------

### PathElem Example for Outline Icon

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/types-reference.md

Illustrates typical values for a PathElem representing a simple outline icon like 'Activity'. It shows specific viewbox offsets, a command string for lines, and has_fill set to false.

```slint
PathElem {
    viewbox-x: -0.5,
    viewbox-y: -0.5,
    viewbox-width: 25.0,
    viewbox-height: 25.0,
    command: "M 22 12 L 2 12 M 12 2 L 12 22",
    has_fill: false,
}
```

--------------------------------

### Example of using IconDisplay with IconSet

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

This Slint code demonstrates how to use the IconDisplay component with an icon from the IconSet. Use IDE autocomplete to find available icons.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Test {
    // Use IDE autocomplete to verify IconSet properties
    IconDisplay {
        icon: IconSet.Home;  // IDE should suggest available icons
    }
}
```

--------------------------------

### PathElem Example for Icon with Fill

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/types-reference.md

Shows typical values for a PathElem representing an icon with fill areas, such as 'TreeDeciduous'. It uses a more complex command string and has_fill set to true.

```slint
PathElem {
    viewbox-x: 0.0,
    viewbox-y: 0.0,
    viewbox-width: 24.0,
    viewbox-height: 24.0,
    command: "M 10 2 L 14 2 L 14 12 L 20 12 L 20 20 L 4 20 L 4 12 L 10 12 Z",
    has_fill: true,
}
```

--------------------------------

### Get Lucide-Slint Library Path

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/README.md

Returns the path to the generated `lib.slint` library file. This is useful for registering the library in your `build.rs` file.

```rust
pub fn lucide_slint::lib() -> String
```

--------------------------------

### Slint UI Component with Lucide Icon

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Import and display a Lucide icon within a Slint UI component. This example shows how to use the IconDisplay and IconSet.

```slint
// ui/main.slint
import { IconDisplay, IconSet } from "@lucide";

export component App {
    IconDisplay {
        icon: IconSet.Home;
    }
}
```

--------------------------------

### System Architecture Overview

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/architecture.md

Illustrates the build-time process where the Rust crate generates Slint components from Lucide SVGs.

```text
User Application (Rust)
    ↓ (imports in build.rs)
lucide-slint crate (lib())
    ↓ (returns path to)
lucide.slint (generated library)
    ↓ (imports in .slint files)
User's .slint code
```

--------------------------------

### Slint Example: Reduce Stroke Width for Small Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

For small icons, reducing the 'stroke-width' can prevent jagged lines and improve rendering quality. This example sets the stroke-width to 1.0 for a 16px icon.

```slint
IconDisplay {
    icon: IconSet.Home;
    size: 16px;
    stroke-width: 1.0;  // Instead of 2.0
}
```

--------------------------------

### Slint Example: Adjust IconDisplay Size

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Increase the 'size' property of the IconDisplay component in Slint to improve rendering quality for icons that appear blurry or pixelated. This example shows setting the size to 32px.

```slint
IconDisplay {
    icon: IconSet.Home;
    size: 32px;  // Instead of 16px
}
```

--------------------------------

### Run Publish Command

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

Execute the publish command using Cargo.

```bash
cargo run -- publish
```

--------------------------------

### Builder Commands

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

The builder tool accepts two primary commands: 'generate' for converting icons and 'publish' for publishing the library.

```bash
cargo run -- generate
cargo run -- publish
```

--------------------------------

### Basic IconDisplay Usage

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

Demonstrates the basic usage of the IconDisplay component to render a FilePlay icon. Ensure IconDisplay and IconSet are imported from '@lucide'.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.FilePlay;
    }
}
```

--------------------------------

### Dynamic Sizing

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Demonstrates how to set the icon size dynamically as a percentage of its container's size.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component ResponsiveIcon {
    in property <length> container-size: 300px;
    
    IconDisplay {
        icon: IconSet.Maximize2;
        size: container-size * 0.2;  // Icon is 20% of container
    }
}
```

--------------------------------

### Configure CMakeLists.txt for lucide-slint Download

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

This CMake script snippet shows how to download the lib.slint file if it doesn't exist and then reference it for Slint sources. Ensure the download URL and target paths are correct.

```cmake
set(LUCIDE_SLINT "${CMAKE_CURRENT_BINARY_DIR}/lucide.slint")
if(NOT EXISTS "${LUCIDE_SLINT}")
  file(DOWNLOAD 
    "https://github.com/cnlancehu/lucide-slint/releases/latest/download/lib.slint" 
    "${LUCIDE_SLINT}" 
    SHOW_PROGRESS)
endif()

slint_target_sources(my_application ui/main.slint
  LIBRARY_PATHS lucide=${LUCIDE_SLINT}
)
```

--------------------------------

### Adaptive Navigation with Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/examples.md

Shows how to create navigation elements that adapt to container width, displaying icons in a compact view and text labels in a wider view. Ideal for responsive navigation bars.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component AdaptiveNavigation {
    in property <length> container-width;
    
    property <bool> is-compact: container-width < 600px;
    
    HorizontalLayout {
        padding: 12px;
        spacing: 8px;
        
        if is-compact: {
            for icon in [IconSet.Home, IconSet.Settings, IconSet.User]:
            IconDisplay {
                icon: icon;
                stroke: #3b82f6;
                size: 24px;
            }
        } else {
            HorizontalLayout {
                spacing: 16px;
                
                Text { text: "Home"; }
                Text { text: "Settings"; }
                Text { text: "Account"; }
            }
        }
    }
}
```

--------------------------------

### Import Lucide Components

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/INDEX.md

Import the necessary components for displaying icons in your Slint application.

```slint
import { IconDisplay, IconSet } from "@lucide";
```

--------------------------------

### Initialize Git Submodules

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

Reinitialize git submodules to ensure all necessary components are present.

```bash
git submodule update --init --recursive
```

--------------------------------

### Usage of Custom Icon Component

Source: https://github.com/cnlancehu/lucide-slint/blob/main/README.md

Demonstrates how to use the custom 'MyComponent' by providing an icon from the 'IconSet'.

```slint
import { IconSet } from "@lucide";

MyComponent {
    icon: IconSet.AArrowDown;
}
```

--------------------------------

### Update Cargo.toml Version

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/builder-reference.md

The version in `lucide-slint/Cargo.toml` is updated to match the Lucide release tag. This snippet shows an example of the package section with an updated version.

```toml
[package]
version = "0.50.0"  # Updated to match lucide release
```

--------------------------------

### Slint Build Configuration

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/INDEX.md

Sets up the build process for Slint applications, including specifying library paths for custom components like Lucide.

```rust
use std::{collections::HashMap, path::PathBuf};
fn main() {
    let library = HashMap::from([
        ("lucide".to_string(),
         PathBuf::from(lucide_slint::lib())),
    ]);
    let config = slint_build::CompilerConfiguration::new()
        .with_library_paths(library);
    slint_build::compile_with_config("ui/main.slint", config)
        .expect("Slint build failed");
}
```

--------------------------------

### Valid Color Formats for Stroke

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

The 'stroke' property accepts various valid color formats including hex codes, RGB values, and named colors. This example demonstrates these options.

```slint
IconDisplay {
    icon: IconSet.Heart;
    stroke: #ef4444;
    stroke: rgb(239, 68, 68);
    stroke: red;
}
```

--------------------------------

### Configure build.rs for lucide-slint

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/build-integration.md

Configure your `build.rs` file to register the lucide Slint library by specifying library paths and compiling your Slint code.

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

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

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

--------------------------------

### Slint Example: Use Absolute Positioning for Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Using absolute pixel positions (e.g., 'x: 10px', 'y: 10px') in Slint can sometimes help with rendering consistency and avoid issues related to relative layout calculations.

```slint
Rectangle {
    x: 10px;  // Integer pixel positions
    y: 10px;
    
    IconDisplay {
        icon: IconSet.Home;
    }
}
```

--------------------------------

### Perform clean build and check for syntax errors

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Clean the build cache and rebuild the project to resolve issues related to stale artifacts. Use 'cargo check' to verify Cargo.toml syntax.

```bash
cargo clean
cargo build
```

```bash
cargo check
```

--------------------------------

### Project Structure

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/overview.md

Illustrates the directory layout of the Lucide Slint project, including the main library, builder CLI, and SVG optimization script.

```tree
lucide-slint/
├── lucide-slint/              # Main library crate
│   ├── Cargo.toml
│   └── src/lib.rs             # Exports lib() function
├── builder/                    # Build tool crate
│   ├── Cargo.toml
│   ├── slint.template         # Tera template for Slint output
│   └── src/
│       ├── main.rs            # CLI entry point
│       ├── definition.rs       # Data structures
│       ├── generate.rs         # Icon conversion logic
│       └── publish.rs          # Release syncing logic
├── svgoptimize/               # SVG optimization script
│   ├── package.json
│   └── src/main.js            # SVGO runner
└── Cargo.toml                 # Workspace manifest
```

--------------------------------

### Manually Download and Reference lib.slint in CMake

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Provides commands to manually download lib.slint using wget and then update CMakeLists.txt to reference the locally downloaded file. This is an alternative if automatic download fails.

```bash
# Download manually
wget https://github.com/cnlancehu/lucide-slint/releases/latest/download/lib.slint -O lib.slint

# Then reference locally in CMakeLists.txt
slint_target_sources(my_application ui/main.slint
  LIBRARY_PATHS lucide=lib.slint
)
```

--------------------------------

### Filled vs. Outline Lucide Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/examples.md

Demonstrates how to render Lucide icons in both outline and filled styles. Use `stroke-fill` to control the fill color. Ensure @lucide is imported.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component FilledIcons {
    VerticalLayout {
        spacing: 16px;
        
        HorizontalLayout {
            spacing: 16px;
            
            VerticalLayout {
                alignment: center;
                
                Text { text: "Outline"; }
                IconDisplay {
                    icon: IconSet.Heart;
                    stroke: #ef4444;
                    stroke-fill: transparent;
                    size: 48px;
                }
            }
            
            VerticalLayout {
                alignment: center;
                
                Text { text: "Filled"; }
                IconDisplay {
                    icon: IconSet.Heart;
                    stroke: #ef4444;
                    stroke-fill: #fecaca;
                    size: 48px;
                }
            }
        }
        
        HorizontalLayout {
            spacing: 16px;
            
            VerticalLayout {
                alignment: center;
                
                Text { text: "Outline"; }
                IconDisplay {
                    icon: IconSet.Star;
                    stroke: #fbbf24;
                    stroke-fill: transparent;
                    size: 48px;
                }
            }
            
            VerticalLayout {
                alignment: center;
                
                Text { text: "Filled"; }
                IconDisplay {
                    icon: IconSet.Star;
                    stroke: #fbbf24;
                    stroke-fill: #fef3c7;
                    size: 48px;
                }
            }
        }
    }
}
```

--------------------------------

### Import lucide-slint in build.rs

Source: https://github.com/cnlancehu/lucide-slint/blob/main/README.md

Configure your `build.rs` file to import lucide-slint as a Slint library. This ensures Slint can find and use the icon definitions during the build process.

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

fn main() {
    let library = HashMap::from([
        ("lucide".to_string(),
         PathBuf::from(lucide_slint::lib())),
    ]);
    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");
}
```

--------------------------------

### Update lucide-slint crate and initialize git submodules

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

If library parsing errors occur, try updating the lucide-slint crate and ensure git submodules are initialized if you are modifying the builder.

```bash
cargo update lucide-slint
```

```bash
git submodule update --init --recursive
```

--------------------------------

### Basic Icon Display

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/INDEX.md

Demonstrates the most basic way to display an icon using the IconDisplay component and a predefined icon from IconSet.

```slint
IconDisplay { icon: IconSet.Home; }
```

--------------------------------

### Import and Use Icons in Slint Code

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/overview.md

Demonstrates how to import and utilize Lucide icons within Slint UI components, specifying properties like color, stroke width, and size.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.FilePlay;
        stroke: #c8f3e5;
        stroke-width: 1.5;
        size: 24px;
    }
}
```

--------------------------------

### File Organization Structure

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/INDEX.md

Illustrates the directory structure of the Lucide-Slint documentation files.

```text
output/
├── INDEX.md                  (you are here)
├── README.md                 (start here)
├── MANIFEST.md               (documentation map)
│
├── REFERENCE SECTION
├── api-reference.md          (Rust + Slint APIs)
├── types-reference.md        (type definitions)
├── icon-properties.md        (properties reference)
├── builder-reference.md      (build tool)
│
├── GUIDE SECTION
├── overview.md               (project overview)
├── build-integration.md      (setup guide)
├── architecture.md           (system design)
│
├── LEARNING SECTION
├── examples.md               (working examples)
│
└── SUPPORT SECTION
   └── troubleshooting.md     (issues + FAQ)
```

--------------------------------

### Build Script for Slint Compilation with Lucide Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Configure Slint's build process to include the lucide icon library. This script sets up library paths for the Slint compiler.

```rust
// build.rs
use std::{collections::HashMap, path::PathBuf};

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

    slint_build::compile_with_config("ui/main.slint", config)
        .expect("Slint build failed");
}
```

--------------------------------

### Display Project Structure with Tree Command

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

The 'tree -L 2 -I target' command helps verify the project structure, ensuring that necessary files are in place and that the 'target' directory is ignored during the listing. This is useful for diagnosing IDE issues.

```bash
tree -L 2 -I target
```

--------------------------------

### Custom Styling for Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/INDEX.md

Shows how to customize the appearance of an icon by setting its stroke color and size.

```slint
IconDisplay {
    icon: IconSet.Heart;
    stroke: #ef4444;
    size: 32px;
}
```

--------------------------------

### Data Flow for Icon Conversion

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/architecture.md

Details the step-by-step process from raw Lucide SVG icons to embedded Slint components within the application binary.

```text
Lucide Icons (SVG)
    ↓
preprocess (usvg)
    ↓
temp/ directory (normalized SVG)
    ↓
svgoptimize (SVGO)
    ↓
temp/ directory (optimized SVG)
    ↓
parse + extract metadata
    ↓
Vec<Icon> (structured data)
    ↓
Tera template rendering
    ↓
lib.slint (Slint source code)
    ↓
Slint compiler
    ↓
Application binary (with icons embedded)
```

--------------------------------

### Register Slint Library in Rust Build Script

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/overview.md

Shows how to use the `lucide_slint::lib()` function in a `build.rs` file to register the icon library with the Slint compiler.

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

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

    slint_build::compile_with_config("ui/main.slint", config)
        .expect("Slint build failed");
}
```

--------------------------------

### Using Stroke-Fill for Filled Icons

Source: https://github.com/cnlancehu/lucide-slint/blob/main/README.md

Demonstrates how to apply a fill color to icons using the `stroke-fill` property. Note that this property is only effective for icons with defined fill areas and may not suit all icons.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Example {
    VerticalLayout {
        IconDisplay {
            icon: IconSet.TreeDeciduous;
            stroke: #7faf6a;
        }

        IconDisplay {
            icon: IconSet.TreeDeciduous;
            stroke: #7faf6a;
            stroke-fill: #a1c88f;
        }
    }
}
```

--------------------------------

### Displaying a Lucide Icon with Default Properties

Source: https://github.com/cnlancehu/lucide-slint/blob/main/README.md

This snippet shows how to display a Lucide icon using its default size, stroke, and stroke-width. Import the '@lucide' module to use IconDisplay and IconSet.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.ScanText;
    }
}
```

--------------------------------

### Check Network Connectivity for lib.slint Download

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Use curl to verify that the lib.slint file is accessible from the specified URL. This helps diagnose network-related download issues.

```bash
curl -I https://github.com/cnlancehu/lucide-slint/releases/latest/download/lib.slint
```

--------------------------------

### Build Project in Release Mode with Cargo

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Use 'cargo build --release' to build the project in release mode. This typically results in faster linking times and optimized executables, which can improve performance.

```bash
cargo build --release
```

--------------------------------

### Rust API: lucide_slint::lib()

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/README.md

Provides the path to the generated `lib.slint` library file, which is necessary for build.rs registration.

```APIDOC
## Rust API: lucide_slint::lib()

### Description
Returns the file path to the generated `lib.slint` library. This is essential for registering the library within your `build.rs` file.

### Signature
```rust
pub fn lucide_slint::lib() -> String
```

### Return Value
- `String`: The absolute path to the `lib.slint` file.
```

--------------------------------

### Verify Slint version compatibility

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Ensure your project uses a compatible Slint version, with version 1.15 or higher recommended for lucide-slint.

```toml
[dependencies]
slint = "1.15"  # minimum 1.15
```

--------------------------------

### Optimized Stroke Width for Sizes

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/icon-properties.md

Shows how to adjust `stroke-width` to maintain visual consistency across different icon sizes, using thinner strokes for smaller icons and thicker for larger ones.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component OptimizedStrokes {
    HorizontalLayout {
        // Small icon: thinner stroke
        IconDisplay {
            icon: IconSet.Settings;
            size: 16px;
            stroke-width: 1.5;
        }
        
        // Medium icon: standard stroke
        IconDisplay {
            icon: IconSet.Settings;
            size: 24px;
            stroke-width: 2.0;
        }
        
        // Large icon: thicker stroke
        IconDisplay {
            icon: IconSet.Settings;
            size: 48px;
            stroke-width: 2.5;
        }
    }
}
```

--------------------------------

### IconSet Global

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

A global object containing all available Lucide icons, accessible as properties. Each property returns an Icon struct.

```APIDOC
## Global: `IconSet`

**Export:** `IconSet` global
**Defined in:** Generated `lib.slint` (via `builder/slint.template`)

A global containing all available Lucide icons as Icon properties.

#### Description

`IconSet` is an auto-generated global with hundreds of properties, one for each Lucide icon. Each property is named in PascalCase and returns an `Icon` struct.

#### Available Icons

All icons from the Lucide library are available. Examples include:
- `IconSet.AArrowDown`
- `IconSet.Activity`
- `IconSet.AlertCircle`
- `IconSet.Archive`
- `IconSet.ArrowUp`
- ... and hundreds more

#### Naming Convention

Icon names are converted from Lucide's kebab-case to PascalCase:
- `a-arrow-down` → `AArrowDown`
- `arrow-up-right` → `ArrowUpRight`
- `file-text-2` → `FileText2`

#### Usage Example

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Dashboard {
    VerticalLayout {
        IconDisplay {
            icon: IconSet.Home;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.Settings;
            size: 24px;
        }
        
        IconDisplay {
            icon: IconSet.LogOut;
            size: 24px;
        }
    }
}
```

#### Discovery

To find icon names:
1. Visit [lucide.dev/icons](https://lucide.dev/icons/)
2. Search for your desired icon
3. Click "Copy Component Name" to get the PascalCase identifier
4. Use it as a property of `IconSet` in your Slint code
```

--------------------------------

### Add lucide-slint Build Dependency

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/build-integration.md

Add lucide-slint as a build dependency in your Cargo.toml file.

```bash
cargo add lucide-slint --build
```

--------------------------------

### Create Custom Icon Component with Consistent Defaults

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Use this to ensure consistent sizing and stroke width for multiple icons by defining a custom component with predefined properties.

```slint
export component MyIcon inherits IconDisplay {
    size: 24px;
    stroke: #333333;
    stroke-width: 2.0;
}

export component App {
    HorizontalLayout {
        MyIcon { icon: IconSet.Home; }
        MyIcon { icon: IconSet.Settings; }
        MyIcon { icon: IconSet.User; }
    }
}
```

--------------------------------

### Creating a Custom Reusable Icon Component

Source: https://github.com/cnlancehu/lucide-slint/blob/main/README.md

This snippet illustrates how to inherit from `IconDisplay` to create a custom component with predefined properties like stroke color and width, promoting code reuse.

```slint
import { IconDisplay, IconSet } from "@lucide";

// My custom icon display component with purple stroke and a stroke width of 1.5
export component MyIconDisplay inherits IconDisplay {
    stroke: #8e8cd8;
    stroke-width: 1.5;
}

export component Example {
    VerticalLayout {
        MyIconDisplay {
            icon: IconSet.NotebookPen;
        }

        MyIconDisplay {
            icon: IconSet.LampDesk;
        }
    }
}
```

--------------------------------

### Icon Size Variations

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/examples.md

Displays Lucide icons at different sizes using a loop. Ensure the @lucide component is imported.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component SizeShowcase {
    GridLayout {
        spacing: 16px;
        
        for size in [12px, 16px, 20px, 24px, 32px, 48px, 64px]: 
        VerticalLayout {
            alignment: center;
            spacing: 8px;
            
            Text {
                text: size;
                text-alignment: center;
                font-size: 12px;
                color: #6b7280;
            }
            
            IconDisplay {
                icon: IconSet.Heart;
                stroke: #ef4444;
                size: size;
            }
        }
    }
}
```

--------------------------------

### Import Lucide Icons in Slint

Source: https://github.com/cnlancehu/lucide-slint/blob/main/README.md

Import necessary components and types from the '@lucide' library for use in Slint applications.

```slint
import { IconDisplay, IconSet, Icon } from "@lucide";
```

--------------------------------

### IconDisplay with Fill Color

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/api-reference.md

Illustrates using the IconDisplay component for icons with fillable regions, applying both stroke and fill colors. Adjust size as needed.

```slint
import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.TreeDeciduous;
        stroke: #7faf6a;
        stroke-fill: #a1c88f;
        size: 32px;
    }
}
```

--------------------------------

### Verify Slint build execution and icon availability

Source: https://github.com/cnlancehu/lucide-slint/blob/main/_autodocs/troubleshooting.md

Check if the build.rs script executed successfully by grepping the build output for 'slint'. Verify icon names using IDE autocomplete within IconSet.

```bash
cargo build 2>&1 | grep -i slint
```