Phoenix Inline SVG

Build Status Coverage Status Inline docs

Adds support for inline SVG files in Phoenix Framework. This package allows you to quickly and easily add SVG files into your HTML templates in Phoenix Framework.


Add phoenix_inline_svg to your list of dependencies in mix.exs:

def deps do
  [{:phoenix_inline_svg, "~> 1.4"}]



def view do
  quote do
    use PhoenixInlineSvg.Helpers

Generic Collection

<%= PhoenixInlineSvg.Helpers.svg_image(@conn, "home") %>

Where home is the name of the SVG file you want to load.

This will output the HTML:


By default this will load the SVG file from:


NOTE: Make sure your svg's are stored in /assets/static/svg/generic/ or your app will crash. Phoenix will automatically copy them to priv directory.


There is an optional argument in the function to allow for breaking up SVG files into collections (or folders on the filesystem):

<%= PhoenixInlineSvg.Helpers.svg_image(@conn, "user", "fontawesome") %>

Will result in the output:


This will load the SVG file from:


HTML attributes

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

<%= PhoenixInlineSvg.Helpers.svg_image(@conn,"home", class: "logo", id: "bounce-animation") %>

Will result in the output:

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

Configuration Options

There are several optional configuration settings for adjusting this package to your needs:


The directory in the project from which to load image assets.

If you are using Exrm/Distillery, make sure you use a directory that is outputted to the projects lib directory after the release has been created.

# If you are using the standard way
config :phoenix_inline_svg, dir: "./assets/somewhere/"

# If you are using the old way
config :phoenix_inline_svg, dir: "/priv/somewhere/"

The default value is /assets/static/svg/ for the standard method and /priv/static/svg for the old method.

Default Collection

The name of the collection to use by default. This is usually overridden to be the primary collection of images.

config :phoenix_inline_svg, default_collection: "fontawesome"

The default value is generic

Not Found

What should be dispayed in the <i> element when there is no SVG file found.

config :phoenix_inline_svg, not_found: "<p>Oh No!</p>"

The default value is:

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

Old Style

To use this package in the old style, add the following line to the view function in your my_app_web.ex file.

def view do
  quote do
    import PhoenixInlineSvg.Helpers

Caching SVGs

Since the old style will read the images from disk on every request, you can enable caching through a GenServer.

For Use with Import Only: If you use the new style, use PhoenixInlineSvg.Helpers, your images are already cached since they are loaded into functions at compile time.

Add the following code to the file lib/__MY_APP_NAME__/inline_svg_cache.ex.

Note: Be sure to change __MYAPP_NAME\_ to the name of your app.

defmodule __MY_APP_NAME__.InlineSvgCache do
  use GenServer

  alias PhoenixInlineSvg.Helpers

  # Client API

  def start_link() do
    GenServer.start_link(__MODULE__, [], name: __MODULE__)

  def svg_image(conn, svg, collection \\ nil) do
    svg_name = "#{collection}/#{svg}"
    case lookup(svg_name) do
      {:ok, data} ->
      {:error} ->
        data =
          if collection != nil do
            Helpers.svg_image(conn, svg, collection)
            Helpers.svg_image(conn, svg)
        insert(svg_name, data)

  def lookup(name) do, {:lookup, name})

  def insert(name, data) do
    GenServer.cast(__MODULE__, {:insert, name, data})

  # Server API

  def init(_) do, [:named_table, read_concurrency: true])
    {:ok, %{}}

  def handle_call({:lookup, name}, _from, state) do
    data =
      case :ets.lookup(:svg_image, name) do
        [{^name, data}] -> {:ok, data}
        [] -> {:error}
    {:reply, data, state}

  def handle_cast({:insert, name, data}, state) do
    :ets.insert(:svg_image, {name, data})
    {:noreply, state}