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:
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 intocore_components.ex
. This file must exist inlib/YOUR_APP_web/components/
for the setup to work correctly.Assets Pipeline Configured
Since Lucide icons are loaded fromnode_modules/lucide-static/
, your project must have the Phoenix asset pipeline properly set up, includingassets/node_modules/
.Node.js and npm Installed
The package depends onlucide-static
, which is managed vianpm
. 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
🚀 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
🎨 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
inassets/node_modules/
- The
<.icon>
component is automatically added tocore_components.ex
- TailwindCSS is automatically configured to use Lucide icons
compatibility
⚙️ Compatibility
Feature | Supported |
---|---|
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
links
🔗 Links
- Lucide Icons: https://lucide.dev
- Hex.pm: https://hex.pm/packages/lucide_liveview
- GitHub: https://github.com/ThomasPoum/lucide_liveview
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!