nfroidure/gulp-iconfont

Generated font produces some filled icons

Closed this issue · 1 comments

When i generate my font with

function buildFont() {
  return src([INPUT_SVG_GLOB])
    .pipe((gulpTransform as any)('utf8', processSvg))
    .pipe(iconfont({
      fontName: 'my-font', 
      formats: ['ttf', 'eot', 'woff', 'woff2'], 
      timestamp: runTimestamp,
      fontHeight: 1001,
      normalize: true,
      prependUnicode: true
    }))
    .pipe(dest(DIST_FONTS));
}

function processSvg(content: string, file: string): string {
  // Remove the frame <rect>.
  return content.replace(/<rect[^>]*id="Frame"[^>]*\/>/gm, '');
}

Some glyphs in the generated font appears filled with black, some don't :

Expected Icon :
Capture d’écran 2020-10-16 à 11 45 53

Glyph in generated font :
Capture d’écran 2020-10-16 à 11 45 38

I could not find anyone with this issue so far.

pioug commented

It happens to me sometimes as well. It can be fixed by editing the SVG by changing how the shapes are layered. Try to group some shapes and play with union, difference, intersection...