How to flatten SVG files

Question

There is this site http://game-icons.net/ that offers huge number of open source icons. That is 1345 SVG files to this day. I would love to use them with a web project I am working on right now. The logical step is to transform them into an icon font. Normally, I would just upload them to https://icomoon.io/app/#/select/font and voila ... but!

The icons are inverse, white symbols on a black rectangle. I can invert colors in Illustrator, but some of the icons have overlaping shapes and this breaks them when icomoon tries to make them Black-transparent.

Example: http://game-icons.net/lorc/originals/archery-target.html The circles are white, not transparent.

How to flatten a Black-White SVG file with overlaping shapes into an icomoon friendly Black-transparent SVG?

My wish is to make the font open source as well and send it back to the site admins for everybody to enjoy.

Caitlin

Answer 1

At the moment the icons have layers of black and white paths. You are going to need to use the "merge paths" feature of Illustrator or Inkscape to make the white (or black) paths into holes where appropriate. I think this is pretty much going to be a manual task. You could write a script to help with some of the work, but I suspect you would end up needing to fix a large number of the icons afterward anyway.

Coplin

It wasn't manual after all. Just select everything and merge in Pathfinder. Then I struggled to remove the white parts. Finally I let the action draw a white rectangle, then select similar objects and clear. Voila! Only took my PC 2 hours to process all those icons. Did it like 3 times before I tweaked it right. – Caitlin