How do I add a custom SVG icon to a local fontawesome library (fontawesome-all.js)?

Question

I have a custom SVG icon that I want to add to my local fontawesome library (fontawesome-all.js) that I included in my project assets folder based on the instructions provided here:

https://fontawesome.com/get-started

However, I am having trouble understanding the format that the icons in this library are written in to display them on a web page. My SVG icon is written in the standard SVG format using tags. Can anyone inform me of a way to include my SVG icon in this library or an alternative approach to transform my SVG icon into a custom fontawesome icon? Thank you.

Answer 1

your svg tag may look like this

<svg width='200' height='200' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path fill="#000000" d="M91.5...48.1z"/></svg>

• in your local fontawesome library (fontawesome-all.js) search for "var icons" then duplicate any element in the icons array (eg:"yen-sign":[...]) and replace name with whatever you want but it will be the fa- suffix when you call for your icon in html (eg:"myicon":[...] => <i class="fa fa-myicon"></i>
• two first number are the value of your "viewBox" svg attribute (eg:100,100 => viewBox="0 0 100 100")
• copy all of your "d" svg attribute inside quote ("M91.5...48.1z" => d="M91.5...48.1z")

Finally var icons= {... ,"myicon":[100,100,[],"","M91.5...48.1z"]}

Just leave the 3rd(array) and the 4th element(supposed to be the unicode value of icon, in our case we can't add our icon to FA font) of the icon definition empty! These don't affect rendering your svg at all!