Skip to content

scoville/lucide_live_view

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Phoenix LiveView Lucide Icons

A collection of Phoenix LiveView Components for all SVG Lucide Icons. Lucide Icons is a community fork of Feather Icons.

Based on Phoenix LiveView Heroicons.

Installation

def deps do
  [
    {:lucide_live_view, "~> 0.1.0"}
  ]
end

Usage

Basic usage

<Lucide.activity />

Dynamic Rendering:

Use the render function to dynamically select an icon based on a variable:

<Lucide.render icon="activity" />

Passing Additional Attributes

Besides, any attributes passed in will be forwarded to the svg element.

<Lucide.activity
  id="my-activity-icon"
  class="inline-block h-5 w-5"
  stroke_width="1.5"
/>

Creating Your Own Component

For further customization, consider wrapping Lucide icons within your own components.

# core_components.ex

attr :name, :string, required: true
attr :class, :string, required: false, default: "icon"
attr :rest, :global

def icon(assigns) do
  ~H"""
  <Lucide.render icon={@name} class={@class} {@rest} />
  """
end

This approach allows you to define and use custom attributes for your icon components.

Usage in .html.heex Files

Use your custom component in your HTML (html.heex) files:

<.icon name="circle" />

Regenerate icons

Update the Lucide Git submodule to a specific version:

mix lucide.update 1.7.0

Generate icons:

mix lucide.gen

License

Source code is licensed under the MIT License.

About

A collection of Phoenix LiveView Components for all SVG Lucide Icons.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • Elixir 100.0%