fa-svgs-in-js

A tiny helper library that converts the available Font-Awesome 4.7.0 icon-set to a JavaScript object of key value pairs of SVG paths.

This enables easy imports in JavaScript & allows for embedding font-icons as SVG, which circumvents issues created by MIME paths for font-files (ttf, eot, woff) being disallowed or font-download being prevented for security reasons by the browser.

Installation

NPM - https://www.npmjs.com/package/fa-svgs-in-js

npm i fa-svgs-in-js;

Usage

import * as faGetIcon from 'fa-svgs-in-js/dist';
const myIcon = faGetIcon('cog');

• The key to pass as parameter, follows the same naming as listed here.
• The function can be wrapped in to an attribute directive to be used in Angular/ AngularJs.
• In the world of React the result can be set as Html(dangerouslySetHtml) content.
• Or simply set innerHTML.

Why?

Ran into an issue with Internet Explorer dis-allowing font-downloads, which hid all the icons with in the application. This is a common issue experienced, and although there were several work arounds, there was not a fluent and easy fix. Some common bugs with regards to above issues are:

• Font Awesome Icons won't load
• IE Font download disable work around?
• IE11 not showing font awesome icons

The Thinking & Approach

• Keep things simple.
• Re-use the well-adopted and well know Font-Awesome 4.7.0 library.
• The approach taken to build this module has two parts. First part, involves downloading the YML Declaration of the icon set. The YML file was then used to font-blast the concatenated SVG source from font-awesome, the results of which were plumbed later into a JSON file of key value pairs of name vs svg strings. Details on the steps involved can be seen in the gulpfile. The second part of the approach involves exposing the icons via a utility method to provide the required svg string as shown here

Contributions

• PR's are welcome.
• Please raise issues if any.

License

Licensed under the MIT license.

Local Development

Steps	Command	Description
1	npm run start	Installs all dependencies node_modules etc., that are necessary for building the project.
2	npm run dist	Generate library in ./dist directory.
3	npm run publish	Publish library/ module. Refer Usage section.