Overview

When you are working with svg files, it is easy to get the urge to just copy and paste them into your templates.

This leads to a ton of duplication and bloat.

There are a couple of libraries in the elixir ecosystem that allows you to inline svgs such as phoenix_inline_svg which is alright.

Recently I used heroicons_elixir which packages all the icons as a Phoenix.Component, pretty cool!

I wanted that functionality but for any collection of svgs.

Inspired by heroicons_elixr I created phx_svg a small, simple library for your Phoenix application.

It’s mix task that preprocess svgs into a Phoenix.Component. It maintains the attributes from the original svg element, but allows you to override and add HTML attributes as you see fit.

To get started all you have to do is add it to you dependencies:

def deps do
  [
    {:phx_svg, "~> 0.1.0", only: [:dev], runtime: false}
  ]
end

Examples

project
│   README.md
└───lib
│   └─web
│       └─components
│            ...
└───svgs
    │   project-icon.svg
    └── subfolder
          another-icon.svg

With the directory structure above we can compile our svgs using:

mix phx_svg.build --mod-name=Svgs --svg-path="./svgs/**/*.svg" --output-path="./lib/web/components/svgs.ex"

This will create a module Svgs with the functions project_icon/1 and another_icon/1 in lib/web/components/svgs.ex

You can now use this module in your templates to inline your svg:s. The nice thing is that you get moduledoc, function docs and editor autocompletions of the svg names, no need to remember what folder they were put in! :)

def render(assigns) do
  ~H"""
  <div>
    <Svgs.project_icon class="w-2 h-2" />
    <Svgs.another_icon fill="currentColor" />
  </div>
  """
end