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