Packages

moon_assets

0.2.3
0.3.0 retired 0.2.6 retired 0.2.5 retired 0.2.4 retired 0.2.3 retired 0.2.2 retired 0.2.1 retired 0.2.0 retired 0.1.22 retired 0.1.21 retired 0.1.20 retired 0.1.19 retired 0.1.18 retired 0.1.17 retired 0.1.16 retired 0.1.15 retired 0.1.14 retired 0.1.13 retired 0.1.12 retired 0.1.11 retired 0.1.10 retired 0.1.9 retired 0.1.8 retired 0.1.7 retired 0.1.6 retired 0.1.5 retired 0.1.4 retired 0.1.3 retired 0.1.2 retired 0.1.1 retired 0.1.0 retired

Provides a set of icons for Elixir projects using TailwindCSS

Retired package: Deprecated - Package deprecated
HexDocs

Current section

Files

Jump to
Readme
31 Versions
0 Dependencies
Dependants
Files
Activity
moon_assets README.md
Raw

README.md 

[![Hex.pm](https://img.shields.io/hexpm/v/moon_assets)](https://hex.pm/packages/moon_assets)

[![Hexdocs.pm](https://img.shields.io/badge/docs-hexdocs.pm-purple)](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.2"}

  ]

end

```



Install `moon_assets` dependency:



```

mix deps.get

```



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` 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" />

```