DEV Community

Andreas Koutsoukos
Andreas Koutsoukos

Posted on • Updated on

Font Awesome fonts to Sketch.app by category

🙏🏻 Get the license and download files

First thing is to get the Font Awesome pro license

🏆 The goal

If you are like me you liked to have one source of true everything right? Imagine situation that you have components library Sketch file in Abstract version control. The components are using local icons SVG source in the same file. Thats is not a problem when you have 10-20 icons. But issue comes when you liked to have all the source from pro versions Font Awesome. You need to add all SVG files by great plugin called Sketch Icons without any control. It looks like huge dropdown list in the Sketch Symbols selector. So what if you could make it look like organized?

Insert -> Symbols ->

🔨 This is how you do it

Montell Jordan - This Is How We Do It gif

  1. Unzip the fontawesome-pro-x.x.x-web.zip
  2. Add new folder named by script (or whatever)
  3. Go to metadata folder and copy categories.yml syntax to clipboard and paste .yml content YAML to JSON converter online
  4. Create new file inside script by categories.json and paste JSON syntax from YAML to JSON converter to the file
  5. Create new folder and named by svgs
  6. Copy .svg icons from svgs fontawesome-pro-x.x.x-web root file to the new svgs folder under script
    Folder structure

  7. Create read-json.py file and paste this code

# Python program to read
# json file


import json
import os
import shutil


# Opening JSON file
f = open('./categories.json')

# Getting svgs files and folder
svgsFolder = 'svgs'
svgsFilesDirectory = os.path.join(os.path.dirname(__file__), svgsFolder)

# returns JSON object as
# a dictionary
data = json.load(f)

# Iterating through the json
# list

for category_list in data['categories']:
    for key, value in category_list.items():
            iconDircectory= os.path.join(svgsFilesDirectory, key)
            os.mkdir(iconDircectory)
            print("Directory '% s' created" % iconDircectory)
            for icon in value['icons']:
                file = str(icon) + '.svg'
                file_name = os.path.join(svgsFilesDirectory, file)
                destination = str(iconDircectory) + '/'
                print(destination)
                shutil.copy(file_name, destination)
                print("Files Moved")
# Closing file
f.close()
Enter fullscreen mode Exit fullscreen mode
  1. Run the .py code and check the How We Do It :)
  2. Now use the Sketch Icons plugin to import the folder by one by one.

Hope you liked this! Enjoy!

Top comments (0)