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

svg_image(conn, name)

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.

svg_image(conn, name, opts)

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.

svg_image(conn, name, collection, opts \\ [])

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

__using__(arg1)

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")