4

I'm a little stumped as to why my nice icon gets a little chewed up by Icomoon.

enter image description here

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
<path fill="green" d="M277.452 42.987c0 15.59-12.756 28.347-28.347 28.347H51.132c-15.59 0-28.347-12.756-28.347-28.347v-14.64C22.785 12.757 35.542 0 51.132 0h197.973c15.59 0 28.347 12.756 28.347 28.347v14.64zM150.452 212h86.334s67.333 32 64 107.333H151.452l-1-107.333z"/>
<path fill="green" d="M150.453 212H64.12s-67.333 32-64 107.333h149.334l1-107.333zm-27 107.333l26 144.667 25-144.667"/>
<path fill="green" d="M64.12 67.495v251.838h170.666V67.495H64.12zm59.332 117.838L106.12 212V75.333h17.332v110z"/>
</svg>

I'm no expert with icon fonts and SVGs, but this all looks correct and Icomoon doesn't complain. It just seems to cut out the intersection between two paths in this SVG when generating the font. A colleague has reported seeing the icon without this issue, which makes this issue murkier.

Could someone lend some wisdom?

3

The problem area, as you said, corresponds to the overlap of two of your paths:

enter image description here

You should flatten your SVG to a single shape with as few paths and points as possible. Overlapping paths, especially in fonts, will give you a lot problems if you don't pay attention to path direction etc. Just don't do it; it's bad practice and will just give you headaches.

This is your SVG fixed as a single path (via Illustrator's Pathfinder):

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
    <path fill="green" d="M236.786,212h-2V71.334h14.318c15.591,0,28.348-12.757,28.348-28.347v-14.64C277.452,12.756,264.695,0,249.105,0H51.132c-15.59,0-28.347,12.757-28.347,28.347v14.64c0,15.591,12.757,28.347,28.347,28.347H64.12V212c0,0-67.333,32-64,107.333h123.333l26,144.667l25-144.667h126.333C304.119,244,236.786,212,236.786,212z M106.12,75.333h17.332v110L106.12,212V75.333z"/>
</svg>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.