Getting SVG path data for SVG Icon extension
This article will show you how to get the appropriate SVG path data for a vector shape created in Adobe Illustrator.
Open or create your shape in Adobe Illustrator
Make sure it is a compound path
When you select the shape Illustrator will tell you if it is a compound path. In this example, the shape is a Group. We need to convert this to a compound path first.
Object > Compound Path > Make
Use the Object > Compound Path > Make menu option to convert the shape to a compound path.
The shape is now a compound path.
Copy to clipboard
Now use Edit > Copy to copy the shape to the clipboard. Illustrator will copy the SVG data.
Get the d="..." data
Paste the clipboard into a text editing application. Then copy the d="" value.
Paste into iconPath field
In the SVG Icon inspector paste the path info into the iconPath property and press Enter. Your icon will then appear.
Flip it
The SVG path data from Font Awesome needs to be flipped in order to be displayed correctly. The path data from Adobe Illustrator does not. Uncheck the flipped checkbox so that the icon displays correctly.
Great tutorial, Trevor.
You mention in the tutorial that SVG path data from Font Awesome needs to be flipped to be displayed correctly. I’m curious, how do you get the SVG path data from a Font Awesome character?