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.1"}]
end

Add a required moon-assets-preset preset to a tailwind.config.js file:

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

Define an icon component in a core_components.ex file:

  def icon(%{name: "moon-" <> _} = assigns) do
    ~H"""
    <span class={[@name, @class]} />
    """
  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. To additionally style an icon you can add class attribute.

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