Logo

dev-resources.site

for different kinds of informations.

Font Awesome fonts to Sketch.app by category

Published at
5/16/2022
Categories
sketch
python
fontawesome
svgs
Author
vj_andrei
Categories
4 categories in total
sketch
open
python
open
fontawesome
open
svgs
open
Author
9 person written this
vj_andrei
open
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!

sketch Article's
29 articles in total
Favicon
Mastering the craft: Top UI/UX Design Tools for 2024
Favicon
Unleash Your Creativity with Online Drawing Tools
Favicon
Figma vs. Sketch – Which Design Tool is Right for You?
Favicon
Aplicaciones para Desarrollador UX 🧝🏻‍♀️
Favicon
Automating Sketch with GitHub Actions
Favicon
Font Awesome fonts to Sketch.app by category
Favicon
Sketch-icons makes it simple to import icons
Favicon
What Is Sketchpad and How Does It Work?
Favicon
What Does the Term "Sketchpad" Mean?
Favicon
The importance of UI/UX | Software Engineering
Favicon
How I Created These Generative Underline Pen Strokes
Favicon
Figma and Sketch: any relation to the development?
Favicon
How I handoff designs to developers with Sketch y Zeplin
Favicon
Draw your application sketch with Inkscape
Favicon
UI Component Source Files (.sketch)
Favicon
Is it possible to build plugins for multiple design tools with a single code base?
Favicon
How to select Best Sketch to HTML Conversion Company?
Favicon
A Lightweight React Library for creating clickable Prototypes
Favicon
Generate Angular code with Infragistics Indigo.Design
Favicon
UI/UX Tools for Beginners: Designing and Prototyping in Sketch
Favicon
Sketch symbol folder frustrations
Favicon
How to Convert Sketch design to UI with Angular/React framework
Favicon
Sketch Data Table Components
Favicon
Sketch Units Plugin 2.0.0-rc.1 available
Favicon
Lorem Ipsum Generator plugin for Sketch
Favicon
30 day of Sketch: the playbook and basics
Favicon
Sketch Template for Prototyping Semantic UI
Favicon
Help From WordPress Developers To Convert Sketch File To WordPress
Favicon
A single source of truth: the future of design systems

Featured ones: