parse html file and output font-awesome-less code with svgs

[towc]

Whether we have a project we want to port over to non-icon-font land or want to write using ol' font-awesome standards but need svgs, we're mostly screwed. Would it be possible to have a webpack plugin, a grunt task, or something else entirely that does this for us?

Ideally it would use inline svgs, and only insert the svgs that are needed, perhaps in a list at the top of the file and using in the icons?

I'd guess even something that simply only checks for icons in the form of <i class="fa fa-xxxxx"></i> would be a huge help to the community

[pixeltherapy]

@towc Looking at where I left off on this (on a private repo due to this repo going quiet) I have a gulp task wrapping a node script that parses the latest FontAwesome using five methods into:

• one SVG file as a sprite sheet, with CSS changing the icon.
• one SVG file as a defs sprite sheet, with viewBox changing the icon.
• one SVG file as a sprite stack, with SVG id's changing the icon.
• one SVG file as a symbols, with SVG id's changing the icon.
• one SVG file as a string of SVGs, with view tags changing the icon.

The idea is that you simply drop FA assets and include FASVG assets without adjusting your markup. In each of these instances the gulp task can be configured to parse only the icons you specify, which is advised as the full set ranges from 362K to 418K uncompressed.

The problem is that none of these methods are a bulletproof drop-in replacement and some polyfills will be needed depending on which method you choose, some of which didn't exist when I last looked. It is at this polyfill stage that I got distracted by a house move and a new baby 🏠 👶 💩 😮

Inlining SVGs would solve a lot of issues and is something that could be achieved with the help of SVG Injector. Although I must admit that the client-side overhead of this method would lead me to just roll my own SVG icon class in PHP instead.

So, if you have the time to browser test and polyfill where required you can use one of these methods. If you want to roll your own you can still use half of these methods to break Font Awesome into individual SVGs for you to include in some fashion.

I had planned to open-source the code I have in a new repo as it ended up taking a different direction than this repo. I will update here with a link when I have it presentable but in the meantime I'll share what I have with you, just drop me a line.