Lucide LiveView

We'd like to thank the amazing team behind Lucide Icons for their incredible work on making these beautiful icons available for free and open-source. Your contributions to the design community are truly remarkable! The main goal of this package is to make Lucide Icons easily accessible to all Elixir and LiveView developers out there!

✨ Features

✅ Automatic installation via setup script
✅ No manual setup required
✅ Direct integration intocore_components.ex
✅ Fully compatible with TailwindCSS

⚠️ Requirements

Before using Lucide LiveView, ensure that your project meets the following requirements:

Phoenix LiveView 1.0.3 or later
The package relies on LiveView components to render icons efficiently. You must have LiveView 1.0.3 or higher installed in your project.
TailwindCSS Enabled
Lucide LiveView uses TailwindCSS to style and display icons properly. Ensure that Tailwind is installed and configured in your project.
core_components.ex File Present
The package automatically integrates Lucide icons into core_components.ex. This file must exist in lib/YOUR_APP_web/components/ for the setup to work correctly.
Assets Pipeline Configured
Since Lucide icons are loaded from node_modules/lucide-static/, your project must have the Phoenix asset pipeline properly set up, including assets/node_modules/.
Node.js and npm Installed
The package depends on lucide-static, which is managed via npm. Ensure that Node.js and npm are installed before running the setup script.
A Working Phoenix Project
This package is designed for Phoenix 1.7+ applications. If you are using an older version, consider upgrading to benefit from LiveView components and Tailwind integration.

📌 If your project meets these requirements, follow the installation instructions below!

🚀 Installation

Lucide LiveView is available on Hex.pm. To install it:

Add the dependency to your mix.exs file:

defp deps do
  [
    {:lucide_liveview, "~> 0.1.0"}
  ]
end

Install dependencies and run the setup script:

mix deps.get
node deps/lucide_liveview/assets/setup.js

📌 That's it! The setup script will automatically:

Install lucide-static in your assets directory
Configure TailwindCSS for Lucide icons
Add Lucide icon support to your core_components.ex

🎨 Usage

Once installed, you can use Lucide icons directly in your templates with the <.icon> component.

Basic Example

<.icon name="lucid-house" class="w-6 h-6 text-gray-500" />

This will render the home icon using Tailwind classes.

Customizing Icons

You can customize the size, color, and other attributes using Tailwind:

<.icon name="lucid-music" class="w-8 h-8 text-blue-500" />

How It Works

The package automatically installs lucide-static in assets/node_modules/
The <.icon> component is automatically added to core_components.ex
TailwindCSS is automatically configured to use Lucide icons

⚙️ Compatibility

Feature	Supported
Phoenix	✅ 1.7+
LiveView	✅ 1.0+
TailwindCSS	✅ Yes

🛠 Development

To contribute or modify this package, clone the repository and install dependencies:

git clone https://github.com/ThomasPoum/lucide_liveview.git
cd lucide_liveview
mix deps.get

For testing:

mix test

🔗 Links

Lucide Icons: https://lucide.dev
Hex.pm: https://hex.pm/packages/lucide_liveview
GitHub: https://github.com/ThomasPoum/lucide_liveview

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

Made with ❤️ by ThomasPoum for all Elixir and LiveView developers out there!