Phoenix Inline SVG

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

Installation

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

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

To make using this package easier add the helpers for this package as an import to your web.ex under the view quote:

def view do
  quote do
    ...
    import PhoenixInlineSvg.Helpers
    ...
  end
end

Configuration Options

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

  • dir: The directory in the project to load image assets from. When using this option make sure you use a directory that is outputted to a location that is accessible after a release is created for the project. (default: /priv/static/svg/)
  • not_found: What should be dispayed in the <i> when there is no SVG file found. (default: <svg viewbox='0 0 60 60'><text x='0' y='40' font-size='30' font-weight='bold' font-family='monospace'>Err</text></svg>)

Usage

Generic Collection

If you have set up the import in the web.ex file a view can use this module by adding:

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

Where home is the name of the SVG file you want to load. This will output the HTML:

<i class="generic-svgs generic-home-svg">
  <svg>...</svg>
</i>

By default this will load the SVG file from:

/priv/static/svg/generic/home.svg

Collections

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

<%= svg_image(@conn, "user", "fontawesome") %>
<i class="fontawesome-svgs fontawesome-home-svg">
  <svg>...</svg>
</i>

This will load the SVG file from:

/priv/static/svg/fontawesome/user.svg