phoenix_inline_svg v1.1.2 PhoenixInlineSvg.Helpers
The module that adds the view helpers to fetch and render SVG files into safe HTML.
New Way
The preferred way of using this library is to add the helpers to the quoted
view
in your web.ex
file.
def view do
quote do
use PhoenixInlineSvg.Helpers, otp_app: :phoenix_inline_svg
end
end
Using the new way you can get svg images using the methods:
# Get an image with the default collection
svg_image("image_name")
# Get an image with a different collection
svg_image("image_name", "collection_name")
# Get an image and append html attributes to svg tag
svg_image("image_name", class: "elixir-is-awesome", id: "inline-svg")
Old Way
As an alternative this module can be imported in the quoted view
def of the
web/web.ex
which will always pull the SVG files from the disk (unless you
are using a caching class).
def view do
quote do
import PhoenixInlineSvg.Helpers
end
end
Note: If you are setting a custom directory for the SVG files and are using
Exrm or Distillery, you will need to ensure that the directory you set is in
the outputted lib
directory of your application.
In Both Configurations
By default SVG files are loaded from: priv/static/svg/
The directory where SVG files are loaded from can be configured by setting the configuration variable:
config :phoenix_inline_svg, dir: "some/other/dir"
Where some/other/dir
is a directory located in the Phoenix
application directory.
Summary
Functions
Sends the contents of the SVG file name
in the configured
directory
Sends the contents of the SVG file name
in the directory
with extra opts
options
Sends the contents of the SVG file name
in the context
directory with extra opts
options
Macros
The using method for the Inline SVG library precompiles the SVG images into static function definitions
Functions
Sends the contents of the SVG file name
in the configured
directory.
Returns a safe HTML string with the contents of the SVG file
using the default_collection
configuration.
“generic” value.
Examples
<%= svg_image(@conn, "home") %>
Will result in the output:
<svg>...</svg>
The main function is svg_image/4
.
Sends the contents of the SVG file name
in the directory
with extra opts
options.
Returns a safe HTML string with the contents of the SVG file after apply options.
Available options: :id, :class
Examples
<%= svg_image(@conn, "home", class: "logo", id: "bounce-animation") %>
Will result in the output:
<svg class="logo" id="bounce-animation">...</svg>
The main function is svg_image/4
.
Sends the contents of the SVG file name
in the context
directory with extra opts
options.
Returns a safe HTML string with the contents of the SVG file
using the default_collection
configuration.
generic
value after apply options.
Examples
Find SVG file inside of “fontawesome” folder
<%= svg_image(@conn, "user", "fontawesome") %>
Will result in the output:
<svg>...</svg>
Find SVG file inside of “icons” folder and add class “fa fa-share” and id “bounce-animation”
<%= svg_image(@conn, "user", "icons", class: "fa fa-share", id: "bounce-animation") %>
Will result in the output:
<svg class="fa fa-share" id="bounce-animation">...</svg>
Macros
The using method for the Inline SVG library precompiles the SVG images into static function definitions.
Note These will not be able to be changed as the contents of the SVG files will be directly loaded into the build of the application.
If you want to support changing SVGs on the fly without a new deployment, use
the import
method instead.
Using this method requires you to tell the use statement what the name of your OTP app is.
Examples
In the quoted view
def of the web/web/ex
you should add:
use PhoenixInlineSvg.Helpers, otp_app: :my_app_name
This will create pre-built functions:
# Default collection
svg_image("image_name")
# Named collection
svg_image("image_name", "collection_name")