RemixIcons

A Phoenix LiveView component library for using Remix Icons in your Elixir applications. This library provides over 2,800 pixel-perfect icons with automatic SVG downloading, caching, and easy integration with Phoenix components.

Features

🎨 2,800+ Icons: Access the complete Remix Icon set
⚡ Performance: Built-in caching with Cachex for optimal performance
🔧 Phoenix Component: Simple, idiomatic Phoenix LiveView integration
🎯 Type Safe: Run-time icon name validation

Installation

Add remix_icons to your list of dependencies in mix.exs:

def deps do
  [
    {:remix_icons, "~> 4.7.0"}
  ]
end

The package includes Remix Icons v4.7.0.

Configuration

Add the RemixIcons cache to your application's supervision tree in lib/your_app/application.ex:

def start(_type, _args) do
  children = [
    # ... other children
    RemixIcons.cache()
  ]

  opts = [strategy: :one_for_one, name: YourApp.Supervisor]
  Supervisor.start_link(children, opts)
end

Usage

We recommend adding an icon component wrapper in your CoreComponents module. This allows you to use the ri- prefix (matching the Remix Icon naming convention) and add custom styling. The icon will inherit the styles from the wrapping div:

attr :name, :string, required: true
attr :class, :string, default: nil

def icon(%{name: "ri-" <> name} = assigns) do
  assigns = assign(assigns, :name, name)

  ~H"""
  <div class={@class}>
    <RemixIcons.icon name={@name} />
  </div>
  """
end

Then use it in your templates:

<.icon name="ri-home-line" class="w-6 h-6" />
<.icon name="ri-user-fill" class="text-blue-500" />

Finding Icon Names

Browse all available icons at remixicon.com. When using the wrapper recommended on "Usage" section, the icon names are identical to those shown on the website:

<.icon name="ri-home-line" />
<.icon name="ri-user-fill" />
<.icon name="ri-arrow-right-line" />

If using RemixIcons.icon directly, omit the ri- prefix:

<RemixIcons.icon name="home-line" />
<RemixIcons.icon name="user-fill" />
<RemixIcons.icon name="arrow-right-line" />

Contributions

This library follows the version numbering of the official Remix Icon repository. When a new version of Remix Icons is released, this package will be updated to match that version number, ensuring consistency and easy tracking of which icon set version you're using.

Updating Icons

To update to a new version of Remix Icons:

Update the @remix_icon_version variable in mix.exs to the desired version
Clean the existing icons:
```
mix remix_clean
```
Download the new icons:
```
mix remix_download
```
Update the package version in mix.exs to match the Remix Icon version
Test your application to ensure all icons are working correctly

Useful Links

Requirements

Elixir ~> 1.18
Phoenix LiveView >= 0.0.0
Cachex >= 0.0.0

License

This package is released under the MIT License.

Remix Icons are licensed under Apache License 2.0. See Remix Icon License for details.