View Source README
PhxFontawesome
A simple Mix task that generates Phoenix Components from Font Awesome SVG files.
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.2"}
]
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"]
Additionally, you may override the default location for generated files (deps/phx_fontawesome/lib
).
config :phx_fontawesome,
dest_path: "./lib/phx_fontawesome" # includes generated files in your projects lib/ directory
Step 3 - Generate component files
From your project root, run mix phx_fontawesome.generate
to create components files. Generated components will be available in your
deps/phx_fontawesome/lib/phx_fontawesome
directory (unless using a custom path).
$ mix phx_fontawesome.generate
[info] Successfully wrote /my_project/deps/phx_fontawesome/lib/phx_fontawesome/fontawesome_free/regular.ex (containing 162 SVG components).
[info] Successfully wrote /my_project/deps/phx_fontawesome/lib/phx_fontawesome/fontawesome_free/solid.ex (containing 1385 SVG components).
$ mix deps.compile phx_fontawesome
==> phx_fontawesome
Compiling 3 files (.ex)
...
Remember to run mix deps.compile phx_fontawesome
after generating files to compile the components!
usage
Usage
Once generated, the heex
components are available to 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.
credits
Credits
- Component generator inspired by the Petal Components project.
- Logo comes from the Font Awesome project.