View Source LucideLiveview (lucide_liveview v0.1.0)

Lucide LiveView is an Elixir package that integrates Lucide Icons into Phoenix LiveView applications.

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

✨ Features

  • Automatic installation via setup script
  • No manual setup required
  • Direct integration into core_components.ex
  • Fully compatible with TailwindCSS

requirements

⚠️ Requirements

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

  1. 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.

  2. TailwindCSS Enabled
    Lucide LiveView uses TailwindCSS to style and display icons properly. Ensure that Tailwind is installed and configured in your project.

  3. 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.

  4. 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/.

  5. 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.

  6. 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

🚀 Installation

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

  1. Add the dependency to your mix.exs file:
defp deps do
  [
    {:lucide_liveview, "~> 0.1.0"}
  ]
end
  1. 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

🎨 Usage

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

basic-example

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

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

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

⚙️ Compatibility

FeatureSupported
Phoenix✅ 1.7+
LiveView✅ 1.0+
TailwindCSS✅ Yes

development

🛠 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

license

📄 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!