SVG Awesome
This is a simple setup for creating an SVG <symbol> sprite from Font Awesome's SVG font.
Steps
- Download Font Awesome from https://fortawesome.github.io/Font-Awesome/.
- 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(~ln. 35). - 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\ (.*?)/>\sand replace with''to remove empty<glyph>definitions.
- Find
- 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). - In svg-awesome.chars.kit:
- Find
@fa-var-(.*?):\ "\\(.*?)";and replace with<!-- @x\2: \1 -->.
- Find
- If you haven't already, process svg-awesome.kit.
- If the file you created isn't an SVG, replace whatever extension it has with
.svg. - 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.