Skip to content

Repository files navigation

Lucide-to-ImGui Generator

An elegant, zero-overhead Web Application that transforms the beautiful Lucide Icons into a pure C++ single-header graphics library for Dear ImGui.

Unlike typical implementations that bundle bulky TTF fonts or hack glyphs, this generator produces real-time standard ImDrawList graphics. It completely replicates Lucide React component mechanics inside pure C++ without heavy runtime logic.

Features

  • Perfect Arc Translation: The integrated Javascript path engine flattens SVG bounds and converts arcs directly into cubic beziers.
  • Glassmorphic UI: Beautiful, premium builder allowing you to selectively bake only the icons you use (improving application compile time and binary size).
  • React-Style Interactivity: Use struct properties to trigger linear interpolations and hover effects on your icons instantly.
  • Zero Runtime Loading: Vectors are stored safely in constexpr arrays mapping cleanly to single operations frame-by-frame. No font loading required!

Quick Start (Running the Generator)

To start the Icon Picker UI locally:

  1. Make sure Node.js is installed.
  2. Open terminal in this folder and install dependencies:
    npm install
  3. Run the development server:
    npm run dev
  4. Open the displayed localhost link. Select the icons you want, and hit Generate Header.
  5. Save the downloaded lucide_imgui.hpp file directly to your ImGui project workspace!

Using the Header in C++

Simply include the header inside your dear imgui project. The header only strictly depends on #include <imgui.h>.

Global API Lookup

#include "lucide_imgui.hpp"

// Render simply using defaults
Lucide::Icon("Menu");

The State-Reactive "React-Style" Syntax

You can adjust thickness, colors, and dynamic hover-responses via a simple struct:

Lucide::IconProps config;
config.size = 24.0f;
config.color = IM_COL32_WHITE;

// Setup a smooth thickness bump on hover
config.thickness = 2.0f;
config.hoverThickness = 3.0f;

// Setup responsive colors
config.hoverColor = IM_COL32(59, 130, 246, 255); // Nice React Blue!
config.animated = true;

// [NEW] Emulate SVG CSS text-shadow / filter: drop-shadow(...) natively!
config.glowRadius = 4.0f;                  // Glow blur expansion in pixels (0.0f = disabled)
config.glowColor = IM_COL32(0, 255, 0, 150); // Optional override (defaults to core icon color)
config.glowIterations = 3;                 // Quality vs performance tradeoff (usually 3 is perfect)

// Draw the reactive icon
Lucide::Icon("Menu", config);

The Optimization: Zero-Overhead Inline Paths

If you want to skip std::string_view lookup paths, the header injects inline definitions strictly for your selected icons yielding the absolute fastest execution bound natively inside GCC/Msvc:

// Renders without ANY switch or map lookup!
Lucide::Menu(config);

Note on ImGui Updates

This engine resolves entirely to .PathLineTo(), .PathBezierCubicCurveTo(), and .PathStroke(). It relies on 0 undocumented bindings, meaning it natively survives almost any ImGui update completely seamlessly.

(Requires minimum C++11, but optimized extensively for C++17 paradigms).

About

Lucide hpp generator for all of the lucide SVG's to be used in C++ with react style effects for hover and glow!

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages