One needs to draw two paths, an outer and an inner.
Then open the SVG file in a text editor and remove everything except the actual path instructions.
This includes removing "fill" and "stroke" attributes too.
The paste the remaining path into the "icon path" of the widget.
If using a script:
put "M144,203.6 C144,203.6 143.8,83.6 143....... 144,203.6 z" into svgpath
--this could be very long so copy and pasting in the IDE is better.
"set the iconpath of widget "widgetName" to svgpath
The "fill Rule" will determine if the inner path is a cut out of the outer or not.
In my testing "even odd" gave me an outline image, whereas "non-zero" filled it all in.
For instance I wanted a bookmark bigger than the one supplied by fontawsome so I drew one.
if you want to see the effect of the fill rule here is the path data so you can try it out yourself.
You should be able to clearly see the two paths in the data. Hint, each one ends in a "z" (close path instruction)
My previous post used in effect two seperate paths.
One advantage to using this method it that by changing the "fill rule" you effectively get two icons for the price of one, a filled one and an outline one. This was indeed what I was after.
However I was curious as to other examples I had seen where the fill rule had no effect.
It turns out these hollowed out icons compounded their paths.
While looking at one such icon in my graphics app I noticed it seemed to have two paths, an outer rectangle and an inner one. However it was not two rectangles grouped (as in my first attempts).
Although constructed that way there was the option of compounding their paths once you had the image you wanted.
Here is the path of the same bookmark icon I presented before except this was made a compound path before exporting.
Compounding does not seem to lessen the path data required, just impacts on the usefulness of the fill rule.
Personally I prefer using the seperate paths approach (at least in my current app) as it affords the flexibility of filled in or outline simply by change in a widget property. Outline icons provide a subtle way to show a non active look.
Coupled with the ability to turn the hilite on or off gives you 4 possible states for the icon without the need to change the path data.