Packages

An inline SVG file renderer for Phoenix Framework. This package is designed to make loading SVG based icons into HTML structure much easeier in Phoenix Frameowrk.

Current section

Files

Jump to
Raw

README.md

# 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`:

```elixir
def deps do
  [{:phoenix_inline_svg, "~> 0.2.1"}]
end
```

To make using this package easier add the helpers for this
package as an import to your `web.ex` under the view quote:

```elixir
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
```