nfroidure/gulp-iconfont

Cannot convert svg with color

Opened this issue · 3 comments

Hi Guys, when I try to convert svg icons(with color), all I can got are grey ones. With icomoon, I was able to generate colorful fonts.(Actually it was set by css files).

And seems in svgicons2svgfont module, it didn't pass the color as a property in glyphs.

Really need to get the color value in glyphs events.

That would be a good enhancement, feel free to PR the feature.

#31 Add color property to svgicons2svgfont

#48 Add color property to gulp-svgicons2svgfont

Just did. And the second PR failed to pass the unit test cuz there is a priority merge(Depend the first PR)

Just upgrade to the latest version(6.0.0 with color property support), it's OK to convert a simple svg icon with only 1 path in it. Just like the svg below,

<svg> <path d="whatever it is" fill="#00ff14" /> </svg>

However when I try to convert a little bit complicated one, e.g.

<svg> 
    <path d="whatever it is" fill="#667788" />
    <path d="whatever it is" fill="#ffffff" />
</svg>

I can get only the '#ffffff' in callback, due to nfroidure/svgicons2svgfont#48 (comment) .

Apparently what I want is not #ffffff at this moment, because the svg font will set it to empty automatically.(Just like the empty space in the alphabet)

So I think I should update the code in parsing the fill property.

And the procedure should run in this way,

  1. Loop until we iterate all the close tags, while meet the fill attribute, add the value to the array, let's say colors[].

  2. Iterate each color value in colors[],

    if all the colors are white/#ffffff/#fff/#FFF/#FFFFFF
    return #ffffff

    else
    return the last color which is not equal to #ffffff.

Any advice?