search

Workshape / icon-font-generator

Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
MIT License
471 stars 76 forks source link

blank icons #41

Closed paulparton closed 6 years ago

paulparton commented 6 years ago

Everything appears to generate correctly, but when i preview the icons they are blank.

image

tancredi commented 6 years ago

Hi @paulparton, could you please share one of the svg you have used?

paulparton commented 6 years ago

Hey @tancredi Here are a few of them

https://drive.google.com/drive/folders/1kyWHVUipAjYPA0JgWiM-fx6jRMwzEV0A?usp=sharing

tancredi commented 6 years ago

It seems as I expected there is a transparent square in your icons that marks the boundaries of the artboard, see:

screen shot 2018-08-30 at 10 29 21

The rectangle needs removing, since even though transparent the icon font will flatten all paths to create a monochromatic shape (fonts have no color support and ignore transparency).

If you do not have software for editing vector images and want to remove the rectangles by code, taking as example the plus.svg icon, you will want to remove the following chunks:

Line 10:

        <rect id="icon-base/16x16" x="0" y="0" width="16" height="16"></rect>

Lines 15-17:

        <g id="colour-/-abyss" mask="url(#mask-2)" fill="#070E21">
            <rect id="$abyss" x="0" y="0" width="16" height="16"></rect>
        </g>

Let me know if you have any questions

paulparton commented 6 years ago

brilliant! thank you very much :)