This is a simple setup for creating an SVG <symbol>
sprite from Font Awesome's SVG font.
- 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\ (.*?)/>\s
and 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.
- 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.