Phoenix.LiveEditable v0.0.1-alpha.2

View Source Phoenix.LiveEditable.Svg (Phoenix.LiveEditable v0.0.1-alpha.2)

Inline SVG utilities.

FontAwesome-style SVG vector icons, embedded in your code.

The workflow is:

  • download the SVG to assets/static/svg
  • customize the SVG with default size, color, etc.
  • use the inline SVG macros in your views and string functions

This approach compiles the SVG into your binary. Fast, efficient and safe. Simpler to use than CDN or NPM approaches.

To learn more, read the Elixir Forum Thread on embedded SVGs.

Link to this section Summary

Functions

inline(file)

Inline SVG for elixir functions.

inline_tag(file)

Inline SVG for EEX tags.

Link to this section Functions

Link to this macro

inline(file)

View Source (macro)

Inline SVG for elixir functions.

Returns the SVG text.

Usage Example:

The file MyIcon must be located in assets/static/svg/MyIcon.svg.

You'll have to require the SVG module in your target code:

defmodule MyappWeb.Mycode do
  require Phoenix.LiveEditable.Svg

  def my_svg(file) do
    Phoenix.LiveEditable.Svg.inline(file)
  end
end

Then you can use the function in your Elixir code:

Myapp.Mycode.my_svg("MyIcon")
Link to this macro

inline_tag(file)

View Source (macro)

Inline SVG for EEX tags.

Usage Example:

The file MyIcon must be located in assets/static/svg/MyIcon.svg.

You'll have to require the SVG module in your view:

defmodule MyappWeb.PageView do
  use MyappWeb, :view
  require Phoenix.LiveEditable.Svg
end

Then you can use the function in an EEX tag:

<%= Phoenix.LiveEditable.Svg.inline_tag("MyIcon") %>