This content is in progress! – Lara

Font Awesome to SVG Sprite

As is common in Bootstrap sites, Venue Next relied on Font Awesome for icons, and loaded a huge font file for only a few icons. Not only did this impact page load time, it was also limiting in terms of styling the nav icons. The design mocks indicated changing the colors of part of the icons; something that is not possible with an icon font. Our options were to replace the font icons with images or…SVG!

I implemented a Gulp.js workflow within the assets directory in order to use an SVG sprite for the icons. I then created a Haml partial for each icon to reduce redundancy in the code. The partial took in two arguments, one for the SVG name and one for the text:

- svg = local_assigns[:svg]
- text = local_assigns[:text]

%a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
  %svg{:viewBox => "0 0 100 100", :class => "icon icon-#{svg}"}
    %use{"xlink:href" => "#icon-#{svg}"}
    = text

The partial was then included in other templates like so:

 = render partial: 'layouts/navigation/nav_icon', locals: {svg: 'game-center', text: 'Game Center'}