View Source InlineSVG (inline_svg v0.1.2)

Render inline SVG.

initialization

Initialization

def SVGHelper do
  use InlineSVG, root: "assets/static/svg", default_collection: "generic"
end

This will generate functions for each SVG file, effectively caching them at compile time.

usage

Usage

render-svg-from-default-collection

render SVG from default collection

svg("home")

It will load the SVG file from assets/static/svg/generic/home.svg:

<svg>...</svg>

render-svg-from-other-collections

render SVG from other collections

You can break up SVG files into collections, and use the second argument of svg/2 to specify the name of collection:

svg("user", "fontawesome")

It will load the SVG file from assets/static/svg/fontawesome/user.svg:

<svg>...</svg>

render-svg-with-custom-html-attributes

render SVG with custom HTML attributes

You can also pass optional HTML attributes into the function to set those attributes on the SVG:

svg("home", class: "logo", id: "bounce-animation")
svg("home", "fontawesome", class: "logo", id: "bounce-animation")

It will output:

<svg class="logo" id="bounce-animation">...</svg>
<svg class="logo" id="bounce-animation">...</svg>

options

Options

There are several configuration options for meeting your needs.

root

:root

Specify the directory from which to load SVG files.

You must specify it by your own.

function_prefix

:function_prefix

Specify the prefix of functions.

By the default, the value is "". The generated function name is svg.

If this value is "_". Then generated function name is _svg.

default_collection

:default_collection

Specify the default collection to use.

The deafult value is generic.

use-in-phoenix

Use in Phoenix

An example:

def DemoWeb.SVGHelper do
  use InlineSVG,
    root: "assets/static/svg",
    function_prefix: "_",
    default_collection: "generic"


  def svg(arg1) do
    Phoenix.HTML.raw(_svg(arg1))
  end

  def svg(arg1, arg2) do
    Phoenix.HTML.raw(_svg(arg1, arg2))
  end

  def svg(arg1, arg2, arg3) do
    Phoenix.HTML.raw(_svg(arg1, arg2, arg3))
  end
end

Link to this section Summary

Functions

The macro precompiles the SVG files into functions.

Link to this section Functions

Link to this macro

__using__(opts \\ [])

View Source (macro)

The macro precompiles the SVG files into functions.