View Source FontAwesome (ex_fontawesome v0.7.2)
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
Installation
Add ex_fontawesome
to the list of dependencies in mix.exs
:
def deps do
[
{:ex_fontawesome, "~> 0.7.2"}
]
end
Then run mix deps.get
.
usage
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
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
@spec icon( String.t(), keyword() ) :: Phoenix.HTML.safe()
Generates an icon.
Options may be passed through to the SVG tag for custom attributes.
options
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
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>
@spec names() :: [String.t()]
Returns a list of available icon names
@spec types() :: [String.t()]
Returns a list of available icon types