MoonAssets (moon_assets v0.2.6)
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.2"}
]
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. To additionally style an icon you can add class
attribute.
<.icon name="moon-adventure" />
<.icon name="moon-adventure" class="text-chichi" />