View Source FontAwesome (ex_fontawesome v0.7.1)

This package adds a convenient way of using Font Awesome SVGs with your Phoenix, Phoenix LiveView and Surface applications.

You can find the original docs here and repo here.

Current FontAwesome version: 6.1.1

Installation

Add ex_fontawesome to the list of dependencies in mix.exs:

def deps do
  [
    {:ex_fontawesome, "~> 0.7.1"}
  ]
end

Then run mix deps.get.

Usage

With Eex or Leex

<%= FontAwesome.icon("address-book", type: "regular", class: "h-4 w-4") %>

With Heex

<FontAwesome.LiveView.icon name="address-book" type="regular" class="h-4 w-4" />

With Surface

<FontAwesome.Surface.Icon name="address-book" type="regular" class="h-4 w-4" />

Config

Defaults can be set in the FontAwesome application configuration.

config :ex_fontawesome, type: "regular"

Link to this section Summary

Functions

Generates an icon.

Returns a list of available icon names

Returns a list of available icon types

Link to this section Functions

Specs

icon(
  String.t(),
  keyword()
) :: Phoenix.HTML.safe()

Generates an icon.

Options may be passed through to the SVG tag for custom attributes.

Options

  • :type - the icon type. Accepted values are ["brands", "regular", "solid"]. Required if default type is not configured.
  • :class - the css class added to the SVG tag

Examples

icon("address-book", type: "regular", class: "h-4 w-4")
#=> <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
      <path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"/>
    </svg>

Specs

names() :: [String.t()]

Returns a list of available icon names

Specs

types() :: [String.t()]

Returns a list of available icon types