View helpers for rendering inline SVG.

The core code is borrowed from nikkomiu/phoenix_inline_svg whose author has been gone for a long time.

Import Helpers

Add the following to the quoted view in your my_app_web.ex file.

def view do
  quote do
    use Retro.Phoenix.HTML.SVG
  end
end

This will generate functions for each SVG file, effectively caching them at compile time.

Usage

render SVG from default collection

<%= svg("home") %>

It will load the SVG file from assets/static/svg/generic/home.svg, and inject the content of SVG file to HTML:

<svg>...</svg>

render SVG from other collections

You can break up SVG files into collections, and use the second argument of svg/2 to specify the name of collection:

<%= svg_image("user", "fontawesome") %>

It will load the SVG file from assets/static/svg/fontawesome/user.svg, and inject the content of SVG file to HTML:

<svg>...</svg>

render SVG with custom HTML attributes

You can also pass optional HTML attributes into the function to set those attributes on the SVG:

<%= svg("home", class: "logo", id: "bounce-animation") %>
<%= svg("home", "fontawesome", class: "logo", id: "bounce-animation") %>

It will output:

<svg class="logo" id="bounce-animation">...</svg>
<svg class="logo" id="bounce-animation">...</svg>

Configuration Options

There are several configuration options for meeting your needs.

:dir

Specify the directory from which to load SVG files.

The default value for standard way is assets/static/svg/.

config :retro, Retro.Phoenix.HTML.SVG,
  dir: "relative/path/to/the/root/of/project"

:default_collection

Specify the default collection to use.

The deafult value is generic.

config :retro, Retro.Phoenix.HTML.SVG,
  default_collection: "fontawesome"

:not_found

Specify content to displayed in the <i> element when there is no SVG file found.

The default value is:

<svg viewbox='0 0 60 60'>
  <text x='0' y='40' font-size='30' font-weight='bold'
    font-family='monospace'>Error</text>
</svg>

config :retro, Retro.Phoenix.HTML.SVG,
  not_found: "<p>Oh No!</p>"