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 in Phoenix Framework.
Installation
Add phoenix_inline_svg
to your list of dependencies in mix.exs
:
def deps do
[{:phoenix_inline_svg, "~> 0.2"}]
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
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
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/
)default_collection
: The name of the collection to use by default. This is usually overridden to be the primary collection of images. (default:generic
)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>