gulp-iconfont
gulp-iconfont copied to clipboard
Cannot convert svg with color
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 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,
-
Loop until we iterate all the close tags, while meet the
fill
attribute, add the value to the array, let's saycolors[]
. -
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?