Skip to content

Latest commit

 

History

History
22 lines (17 loc) · 1.54 KB

README.md

File metadata and controls

22 lines (17 loc) · 1.54 KB
Raw

SVG Awesome

This is a simple setup for creating an SVG <symbol> sprite from Font Awesome's SVG font.

Steps

  1. Download Font Awesome from https://fortawesome.github.io/Font-Awesome/.
  2. Replace the contents of svg-awesome.icons.kit with the <glyph>s from Font Awesome's fonts/fontawesome-webfont.svg, starting at the glyph for unicode &#xf000; (~ln. 35).
  3. In svg-awesome.icons.kit:
    • Find <glyph\ unicode="&#x(.*?);"\ (horiz-adv-x="(.*?)" )?d="(.*?)"\ /> and replace with <symbol\ id="<!-- @x\1 -->"\ viewBox="0\ 0\ 1792\ 1792"\ data-unicode="&#x\1;"\ data-horizadvx="\3" preserveAspectRatio="true"><title><!-- @x\1 --></title><path\ d="\4"/></symbol>.
    • Find <glyph\ (.*?)/>\s and replace with '' to remove empty <glyph> definitions.
  4. Replace the contents of svg-awesome.chars.kit with the character variables from Font Awesome's less/variables.less, starting at the first variable that starts with @fa-var- (~ln. 14).
  5. In svg-awesome.chars.kit:
    • Find @fa-var-(.*?):\ "\\(.*?)"; and replace with <!-- @x\2: \1 -->.
  6. If you haven't already, process svg-awesome.kit.
  7. If the file you created isn't an SVG, replace whatever extension it has with .svg.
  8. Enjoy your new SVG Awesome icons.

Requires

  • A text editor or file processor that's capable of regex find and replace.
  • A Kit compiler. The easiest is the original, CodeKit. If you're aware of any others, hit me up and I'll check them out and link them here if they're good.