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.
Attrition can be installed by adding attrition to your list of dependencies in mix.exs:
def deps do
[
{:svg_sprite, "~> 0.1.0"}
]
endmix deps.getSetup for attrition can be accomplished in two easy steps!
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
endAs 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"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 Name | Long Name | Filename |
|---|---|---|
| fas | solid | solid.svg |
| far | regular | regular.svg |
| fab | brands | brands.svg |
| fal | light | light.svg |
| fad | duotone | duotone.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") %>See License