Skip to content

Conversation

@kocheick
Copy link

@kocheick kocheick commented Aug 21, 2025

Overview

Implements support for Lucide Icons in Kobweb with build-time code generation and
tree-shaking optimization, addressing issue #697.

What’s Changed

New Module: silk-icons-lucide

  • Created new frontend module with npm dependency on Lucide icons
  • Implemented build-time codegen that extracts SVG data from Lucide’s ESM modules
  • Generated strongly-typed composable functions for all 1,600+ Lucide icons
  • Added tree-shaking support — only used icons are included in the final bundle

API Design

// Default usage
LiCamera()

// Customized with size and color
LiHeart(size = 2.em, color = Colors.Red)
  • Icon functions use the Li prefix (Lucide Icons). Example mappings:
    • camera → LiCamera
    • arrow-down → LiArrowDown
  • One composable per icon for optimal tree-shaking.
  • No dynamic/generic fallback API in this iteration.

Key Features

  • Tree-shakable: Only imported icons are included in the final bundle
  • Type-safe: Individual composables for each icon (e.g., LiCamera, LiHeart)
  • Customizable: Size, stroke width, color, and standard modifiers
  • Performance: Renders as inline SVG elements for optimal performance
  • Build-time generation: Icons are generated during build from the npm package

Usage Examples

  • Default icon usage: LiCamera()
  • Customized icon: LiZoomIn(size = 2.em, color = Colors.Honeydew)

Documentation

  • Updated module README with Li* usage examples and API reference
  • Clear examples showing default and customized icon usage

Files Added/Modified

  • frontend/silk-icons-lucide/build.gradle.kts — Build configuration with codegen
  • frontend/silk-icons-lucide/README.md — Usage documentation (updated to Li*)
  • playground/site/src/jsMain/kotlin/playground/pages/Widgets.kt — Usage examples (updated to Li*)
  • Generated: LucideIcons.kt with all Li* icon composables

Testing

  • Icons render correctly in dev and production builds
  • Tree-shaking intent: only used icons are included (to be verified)
  • SVG structure matches Lucide specifications
  • Custom styling (size, color, stroke-width) works as expected

Breaking Changes

None — this is a new optional module.

Related Issues

Closes #697

@kocheick kocheick changed the base branch from main to dev August 22, 2025 02:09
Copy link
Member

@bitspittle bitspittle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check the README.mds I added in silk-icons-fa and silk-icons-mdi. It would be nice if you could add one for this feature as well. It shouldn't be long -- just add some basic information about where you get lucide icons data from, things that might help a future dev navigate this module if they need to make changes.

…d documentation and build scripts accordingly
                     |@file:Suppress("unused", "SpellCheckingInspection")
                     |"

                     from generated LucideIcons.kt
@bitspittle bitspittle force-pushed the dev branch 2 times, most recently from 5c34e2e to e726ac5 Compare September 11, 2025 18:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for Lucide Icons

2 participants