Icons

This guide will help you set up and start using Moon Icons, which are built with Phoenix LiveView.

Setting Up

All the icons are organized within a separate project named moon_assets.

If you have already installed moon_live, there's no need to install anything additional. The moon_assets package should already be configured and ready for use.

# Use the MoonLive module to enable Icons feature
use MoonLive

# Basic close icon
<.icon name="close" />

# Provide any customization
<.icon name="close" class="text-piccolo size-10 opacity-40 hover:opacity-70"/>

Troubleshooting: Add static plug

Add a static plug to endpoint.ex file to serve static moon icons.

endpoint.ex

plug Plug.Static,
    at: "/moon_assets/",
    from: :moon_assets,
    gzip: true

Optional: Add `moon_assets` dependency to your project

This step is optional and applies only if you choose to directly consume the moon_assets repository.

In case you prefer not to use moon_live, you can still install the moon_assets repository directly.

defp deps do
  [
    {:phoenix, "~> 1.5.7"},
    {:phoenix_live_view, "~> 0.15.0"},
    {:phoenix_html, "~> 2.14"},
    # Add moon_assets dependency here
    {:moon_assets, "~> 0.7", organization: "coingaming"},
  ]
end

What's next?