[](https://hex.pm/packages/moon_assets)
[](https://hexdocs.pm/moon_assets)
# 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" />
```
