SvgSprite (SvgSprite v0.1.1) View Source

Want the wonderful goodness of SVG without having the need for our SVG + JS framework at the moment? Have no fear, SVG Sprites are here. We have lovingly prepped all the icon set styles into their own SVG sprites.

This quote is taken from the Font Awesome documentation about SVG sprites. I love the Font Awesome icons, but I'm not particularly eager to use their JavaScript code, the CSS files or the webfont. So the "big" SVG sprite files provided by this library are just the perfect solution for me.

SvgSprite helps you to embed these SVG sprites in your Phoenix template. Instead of writing verbose code like this:

<a href="https://facebook.com/fontawesome">
  <svg fill="currentColor" class="w-5 h-5">
    <use xlink:href="/images/brands.svg#facebook"></use>
  </svg>
</a>

It is much nicer to just write.

<a href="https://facebook.com/fontawesome">
  <%= icon("brands", "facebook", class: "w-5 h-5") %>
</a>

Or use atoms for the icon family and name.

<a href="https://facebook.com/fontawesome">
  <%= icon(:brands, :facebook, class: "w-5 h-5") %>
</a>

This library is inspired by Font Awesome but it is not limited to it. Basically, it expects a SVG sprite file inside a base path which contains all the symbols. Every symbol has to have a unique name as its HTML id attribute.

The example above expects a file named brands.svg inside your images static path. Inside this file a symbol with the id facebook has to exist.

Installation

Attrition can be installed by adding attrition to your list of dependencies in mix.exs:

def deps do
[
  {:svg_sprite, "~> 0.1.0"}
]
end

Fetch the dependencies

mix deps.get

Setup

Setup for attrition can be accomplished in two easy steps!

1. Import SvgSprite inside your view_helpers

Of course you could add the library to every view manually by adding import SvgSprite. A better solution is to add it to the view_helpers function in inside your application_web.ex file.

defp view_helpers do
  quote do
    # Use all HTML functionality (forms, tags, etc)
    use Phoenix.HTML

    # Import LiveView helpers (live_render, live_component, live_patch, etc)
    import Phoenix.LiveView.Helpers

    # Import basic rendering functionality (render, render_layout, etc)
    import Phoenix.View

    import SvgSprite
    ...
  end
end

(Optional) 2. Environment Configuration

As mentioned above, the library searches per default inside the images path inside your static assets folder. But you can change the base path inside your config.exs file.

config :svg_sprite,
  base_path: "/images"

Of course you can also host the SVG sprites on some kind of CDN.

config :svg_sprite,
  base_path: "https://cdn.mycompany.com/svg/sprites"

Font Awesome specific features

Normally, Font Awesome uses short names for the icon family like fas, far, fab, etc. in its documentation. And the icon names always have a "fa-" as a prefix.

SvgSprite maps the short names to the long names of the SVG sprite files.

Short NameLong NameFilename
fassolidsolid.svg
farregularregular.svg
fabbrandsbrands.svg
fallightlight.svg
fadduotoneduotone.svg

It also removes the "fa-" prefix, because inside the SVG sprite files the names are used without the prefix. The following statements are all equivalent.

<%= icon("brands", "facebook", class: "w-5 h-5") %>
<%= icon("fab", "fa-facebook", class: "w-5 h-5") %>
<%= icon("brands", "fa-facebook", class: "w-5 h-5") %>
<%= icon("fab", "facebook", class: "w-5 h-5") %>

Link to this section Summary

Functions

Creates an SVG tag which references a SVG sprite from an external SVG sprite file and returns it as a :safe HTML string.

Link to this section Functions

Link to this function

icon(family, icon, opts \\ [])

View Source

Creates an SVG tag which references a SVG sprite from an external SVG sprite file and returns it as a :safe HTML string.