Skip to content

Instantly share code, notes, and snippets.

@serghost
Last active May 19, 2020 10:33
Show Gist options
  • Save serghost/d3d8187a80cb1e2ee38197f57878672c to your computer and use it in GitHub Desktop.
Save serghost/d3d8187a80cb1e2ee38197f57878672c to your computer and use it in GitHub Desktop.
Generate custom fontawesome 5 icons from list of SVG files exported by Illustrator

See https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome for understanding of how customization works.

First, you need to cd into the folder with svg files and concatenate it to one html file

cd /path/to/svg_files

cat * > svgs.html

Now open the svgs.html and collect all requred paths with this script:

svgs = document.getElementsByTagName("svg")

Array.from(svgs).map(function (e) {
  i = e.querySelectorAll("path");
  t = e.getElementsByTagName('title')[0].innerHTML;

  a = Array.from(i).map(function(e2) {
    return e2.getAttribute('d');
  }).join(' ');
return [t,a];
})

Now you have array of two-element arrays. The first element is the name exctracted from title, which in order was generated by illustrator. This title we'll use for name of the custom icon. Other element - the concatenated path of icon.

Right-click and copy result object, save it in the temp file (i.e. res)

Open irb and create this method:

def self.convert_to_fa(data)
  r = data.each{|name, path|
  n = name.split('-').map{|e| e.capitalize}.join
  s =  <<-STR
    var fa#{n} = {
        prefix: 'far',
        iconName: '#{n}',
        icon: [
            448, 448,
            [],
            null,
            '#{path}'
        ]
    }
    FontAwesome.library.add(fa#{n});
    STR
  puts s
}
end

ps: maybe you need to change the viewbox or the prefix

Open res file in irb

s = File.open("/path/to/svg_files/res")

Parse it to ruby hash

data = JSON.load(s)

Run convert_to_fa(data)

In the output you will see prepared icons

List of

var fa9Man = {
    prefix: 'far',
    iconName: '9Man',
    icon: [
        448, 448,
        [],
        null,
        'M19.51,42.94c0,.14,0,.29,0,.44C19.48,46,20.9,48,22.64,48S25.8,46,25.8,43.38c0-.15,0-.3,0-.45l-2.36-4.06a2.21,2.21,0,0,0-.77-.16,2.25,2.25,0,0,0-.77.16Z M22.64,48.89c-2.26,0-4.09,4.67-4.09,10.4s1.83,10.39,4.09,10.39S26.73,65,26.73,59.29,24.9,48.89,22.64,48.89Z M10.88,27.32c2,6.66,6.56,10.92,11.67,10.92S32.18,34,34.21,27.31c2.17.09,4.23-2,4.75-5a7,7,0,0,0-.45-4.07A3.76,3.76,0,0,0,35.79,16l-.25-.05c-.16,0-.35-.07-.56-.09,0-.3-.1-.6-.16-.89a8.44,8.44,0,0,0,.44-7.31,8.62,8.62,0,0,0-6.15-5.2S26.08-.39,19.34,0,9.31,6.3,8.92,9.93a12,12,0,0,0,1.24,5.63c0,.07,0,.14,0,.21l-.34.11A1.13,1.13,0,0,1,9.5,16a3.78,3.78,0,0,0-2.73,2.3,7,7,0,0,0-.45,4.07C6.83,25.25,8.77,27.32,10.88,27.32Zm19.77-9.09H13.88l-1.56-1.32a12.37,12.37,0,0,0,7.33-2.71,30.15,30.15,0,0,0,4.88-5.44s2.43,3.87,4.58,5.16c1.48.88,3,2,3.83,2.6ZM8.33,19a2.19,2.19,0,0,1,1.46-1.32,3.17,3.17,0,0,0,.56-.16h0l2.75,2.32a4.36,4.36,0,0,0,8.7.12H23a4.36,4.36,0,0,0,8.71-.31v-.05l2.59-1.93.26-.11a1.5,1.5,0,0,1,.63.06l.3.06A2.19,2.19,0,0,1,37,19a5.17,5.17,0,0,1,.31,3.06c-.37,2.14-1.79,3.74-3.14,3.52a1,1,0,0,1-.23-.06L33,25.2l-.24.9C31.1,32.33,27,36.52,22.55,36.52s-8.5-4.07-10.21-10.37l-.41-.71-.77.13c-1.33.22-2.77-1.38-3.14-3.52A5.26,5.26,0,0,1,8.33,19Z M35.45,34l-2.6-2.27s-.83,1.2-2.37,3h0l-.66.77c-.13.14-.28.28-.43.42a17.34,17.34,0,0,1-5.2,2.76l5.63,10,2.08-2.5-.17,1.1-2,2.4-3.65-6.3c0,2.69-1.55,4.87-3.43,4.87s-3.4-2.18-3.43-4.87l-3.65,6.3L14.4,48.36l-.19-1.12,1.26,1.51,5.37-10a16.55,16.55,0,0,1-4.16-2.15,5.19,5.19,0,0,1-.46-.36l-.16-.13c-.19-.17-.39-.34-.57-.52s-.5-.53-.73-.79h0C13.2,33.25,12,32.1,12,32.1L9.49,34.33C4.79,35.7,1.74,37.69.76,40A3.52,3.52,0,0,0,0,42.11v.71a44.11,44.11,0,0,0,4.78,15l.09.15c.16.29.32.58.49.87a27.43,27.43,0,0,0,1.91,2.9c4.14,5.57,9.55,8.91,15.36,8.91a16.56,16.56,0,0,0,9.36-3C39.39,63.78,44.22,55,45.69,42.36V41.7C45.69,38.47,42,35.7,35.45,34ZM22.64,70c-2.41,0-4.37-4.79-4.37-10.67s2-10.67,4.37-10.67S27,53.4,27,59.29,25.05,70,22.64,70Z'
    ]
}
FontAwesome.library.add(fa9Man);

# and so on 

Paste this result into the fontawesome initializer/script and you're done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment