View Source README

PhxFontawesome

A simple Mix task that generates Phoenix Components from Font Awesome SVG files.

pipeline status

installation

Installation

This package is available in Hex, and can be installed by adding phx_fontawesome to your list of dependencies in mix.exs:

def deps do
  [
    {:phx_fontawesome, "~> 1.1.1"}
  ]
end

generate-heex-components

Generate Heex components

Step 1 - Install desired font set

In your Phoenix project, install desired font set using npm or yarn. Please consult the Font Awesome documentation if you run into any trouble here.

$ cd assets/
$ yarn add @fortawesome/fontawesome-free
# or
$ yarn add @fortawesome/fontawesome-pro     # needs a license

Step 2 - Choose font set types to generate

In your config.exs, you may choose which types to generate heex components for. Defaults to regular and solid.

config :phx_fontawesome,
  types: ["regular", "solid"]

Step 3 - Generate component files

From your project root, run mix phx_fontawesome.generate to create components. Generated files will be available in your lib/phx_fontawesome directory.

$ mix phx_fontawesome.generate
[info]  Successfully wrote /path/to/my_project/lib/phx_fontawesome/fontawesome_free/regular.ex (containing 162 SVG components).
[info]  Successfully wrote /path/to/my_project/lib/phx_fontawesome/fontawesome_free/solid.ex (containing 1385 SVG components).

usage

Usage

Once generated, the heex components are part of your project, and can be used as a regular Phoenix.Component. Icon name can be the function or passed in as a type.

<PhxFontawesome.Free.Solid.angle_up />
<PhxFontawesome.Free.Regular.render icon="angle_up" />

<!-- override default classes  -->
<PhxFontawesome.Free.Solid.angle_up class="my-custom-class" />

<!-- pass extra properties -->
<PhxFontawesome.Free.Solid.angle_up title="Font Awesome angle-up icon" />

If you would like to apply the default styling for SVG elements, simply include the Font Awesome CSS in your app.css file.

@import "@fortawesome/fontawesome-free/css/all.css";
@import "@fortawesome/fontawesome-free/css/svg-with-js.css";

Keep in mind that if you're using the non-free version of Font Awesome, make sure that you don't publish the generated components as that would be a licensing breach. Consider adding /lib/phx_fontawesome/ to your .gitignore file, and use mix phx_fontawesome.generate in your deployment pipeline to build SVG components for deployed applications.

credits

Credits