gulp-iconfont icon indicating copy to clipboard operation
gulp-iconfont copied to clipboard

Cannot convert svg with color

Open TylerYang opened this issue 9 years ago • 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.

TylerYang avatar Dec 25 '15 07:12 TylerYang

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

nfroidure avatar Dec 25 '15 10:12 nfroidure

#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)

TylerYang avatar Dec 28 '15 05:12 TylerYang

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 https://github.com/nfroidure/svgicons2svgfont/pull/48#issuecomment-167696308 .

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?

TylerYang avatar Feb 16 '16 10:02 TylerYang