MoonAssets

Moon Assets is a HEX package that serves icons and assets for Phoenix projects built with TailwindCSS.

Installation

The package can be installed by adding moon_assets to your list of dependencies in a mix.exs file:

def deps do
  [
    {:moon_assets, "~> 0.3"}
  ]
end

Install moon_assets dependency:

mix deps.get

Add a required moon-assets-preset preset to a tailwind.config.js file. Replace PATH_TO_DEPS_FOLDER with the actual deps folder path.

module.exports = {
  presets: [
    require("PATH_TO_DEPS_FOLDER/moon_assets/lib/moon-assets-preset"),
  ],
};

Define an icon function in a core_components.ex file with a "moon-" pattern match. You may define another icon function with different pattern matches, in case you need it.

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

def icon(%{name: "moon-" <> _} = assigns) do
  ~H"""
  <span class={[@name, @class]} {@rest} />
  """
end

Basic usage

To use an icon component, specify a name attribute where moon- is required by TailwindCSS to properly identify a necessary icon and generate a class in your app's CSS file.

<.icon name="moon-adventure" />

Customization

To additionally style an icon add class attribute. Use text-COLOR utility class for changing icon color, and size-XX utility class for specifying width and height of an icon.

<.icon name="moon-adventure" class="text-chichi" />
<.icon name="moon-adventure" class="size-6" />